CSS中清除浮动的几种方法

碎碎酱
2016/10/10
Comments
css

在css中使用浮动进行布局时, 例如如下的代码:

<!doctype html>
<html>
    <head>
        <title>test.html</title>
        <meta charset="utf-8">
        <style>
            .child {
                width: 100px;
                height: 100px;
                float: left;
            }
            .child1 {
                background-color: red;
            }
            .child2 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="child child1"></div>
            <div class="child child2"></div>
        </div>
        <p>元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制</p>
    </body>
</html>

p标签这个块级元素会跟在child2那个div后面, 而不是在新行渲染, 因此我们需要清除浮动, 来恢复container的块元素效果.

解决办法

父元素定义height
将父元素的高度定义为子元素的高度, 以便将父元素撑起.
1
2
3
.container {
height: 100px;
}
父元素末尾添加元素
在父元素的末尾添加一个具有clear:both属性的块级子元素, 也可以是具有display:block属性的行内元素, 该元素必须是个空元素, 不能包含其它内容.
1
2
3
4
5
6
7
8
9
.float-fix {
clear:both;
}
<div class="container">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="float-fix"/>
</div>
父元素定义overflow
给父元素添加overflow属性, 值可以为hidden或者auto.
1
2
3
.container {
overflow: hidden;
}

父元素也浮动, 并且设置父元素宽度

.container {
    float: left;
    width: 100%;
}

父元素设置display: table
1
2
3
.container {
display: table;
}
父元素定义伪类
给父元素定义:after伪类, 并且使用类似方法2的方法来清除浮动.
1
2
3
4
5
.container:after {
content: "";
display: block;
clear: both;
}

CSS中清除浮动的几种方法

解决办法

分类

标签

热门文章

Fiora的前世今生 - 一个基于node.js和react的全栈IM聊天室

linux服务器安全性配置

react-redux 原理分析