Home > Article > Web Front-end > How to clear floats in CSS? Introduction to Clear and BFC methods
How to clear floats in CSS? Introduction to Clear and BFC methods
- 青灯夜游forward
- 2020-11-13 17:35:192921browse
[Recommended tutorial: CSS video tutorial]
The float attribute is often used in CSS layout, but after using the float attribute It is very distressing to make it separate from the parent container in the ordinary flow
1 Floating brings layout convenience, but it also brings new problems
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Clear float</title>
<style type="text/css">
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
.p{
border:solid 3px #a33;
}
.c{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
The effect we hope to see is this
But the result is like this
The parent container does not surround the floating child elements, commonly known as Collapse, in order to eliminate this phenomenon, we need some techniques to clear floats.
2 How to clear floats
There are generally two ideas for clearing floats
Use the clear attribute to clear floats
Make the parent container form a BFC
Look at it separately
2.1 Use the clear attribute to clear floats
What is the clear attribute? The clear attribute specifies which side of the element does not allow other previous floating elements. Modify the code just now
<div class="p"> <div class="c"></div> <div class="c" style="clear:left;"></div> <div class="c"></div> </div>
The second div is added After the clear:both attribute, the div on the left (the first div) no longer floats, so the subsequent divs can hang. We can use this to add an empty div at the end of the parent container and set the attribute clear:left, so that we can achieve our goal.
2.1.1 Add an empty div to clean up the floats
Slightly modify the code we just made
<div class="p"> <div class="c"></div> <div class="c"></div> <div class="c"></div> <div style="clear:left;"></div> </div>
That is, add
<div style="clear:left;"></div>
at the end of the parent container and take a look The effect
is really good. Some students may feel strange after reading it. Why did they want to modify the second div
<div class="c" style="clear:left;"></div>
in the previous example and it did not become Such an effect
# Let me tell you my humble opinion. The clear:left attribute only eliminates the impact of the floating div on the left side of it, but does not change the left div or even the Due to the performance of the parent container, from the perspective of the parent container, the three divs are still float, so the height is still collapsed. But we added a non-floating div at the end. Since it has the clear:left attribute, it will position itself according to the left p not floating, that is, it will be positioned to the next line, and the parent container will see a non-floating, The sub-element elements of the ordinary flow will surround them, which will have the effect of wrapping the three floating elements by the way, and the height will no longer collapse (I don’t know if this is explained clearly or if this understanding is correct, I hope you understand. guidance).
Of course, in addition to adding div, you can also add other html elements such as br. The principles are the same and will not be repeated.
2.1.2 Use CSS to insert elements
The above method has good browser compatibility, but there is a big problem in that it adds content to the page to achieve the purpose of changing the effect, that is Data and performance are confused. Since it is monetization, let’s see how to use CSS to solve this problem. The basic method is to append the element to the parent container at the end, but we can use the :after pseudo-element of CSS to do this.
Add a class floatfix
.floatfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
Add this class to the parent container
<div class="p floatfix"> <div class="c">1</div> <div class="c">2</div> <div class="c">3</div> </div>
so that we can see the correct effect
To briefly explain, after adding the floatfix class to the parent container, an invisible block element will be appended to it, and then its clear attribute will be set to left, which is similar to the principle just now.
2.1.3 Master's handwriting
Nicolas Gallagher provides a cleaner-looking approach in A new micro clearfix hack
.floatfix:after{
content:"";
display:table;
clear:both;
}
Nicolas Gallagher's original article also includes: before is to deal with margin overlap, which is not listed in this article.
Some classmates have proposed that the above method looks good, but what should we do if IE6 and 7 do not support pseudo elements? This requires us to use BFC/haslayout
2.2 Make the parent container form a BFC
After the indiscriminate bombardment about BFC in the garden a few days ago, I believe it Everyone has a certain understanding of BFC. Those who are not satisfied can take a look at Block Format Content. BFC has three characteristics
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
- BFC不会重叠浮动元素
- BFC可以包含浮动
我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果
2.2.1 利用float来使父容器形成BFC
简单修改一下代码
<div class="p" style="float:left;"> <div class="c">1</div> <div class="c">2</div> <div class="c">3</div> </div>
这样我们可以得到结果
我们可以看到父容器高度没有塌陷，但是长度变短了，因为div应用float‘后会根据内容来改变长度，这个在很多时候很有用，但是我们不希望有这种效果怎么办？
2.2.2 使用BFC的其它局限
上面提到使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？难道要全部使用folat吗（确实有这种布局方式倒是）。BFC的几种方式都有各自的问题，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。
看起来还是第一种方式比较好，可是低版本IE该怎么办呢？
2.2.3 hasLayout
我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true
- position: absolute
- float: left|right
- display: inline-block
- width: 除 “auto” 外的任意值
- height: 除 “auto” 外的任意值
- zoom: 除 “normal” 外的任意值
- writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true
3 一个相对靠谱的解决方案
经过上面的比较我们可以得出一个相对靠谱的解决方案
- 在IE+、现代浏览器上使用伪元素
- 在IE6、7使用hasLayout
具体应该使用哪种方式来使元素hasLayout为true呢？相对而言zoom：1比较好，因为不会造成其它影响。想造成只在IE6、7上使用某些CSS的效果，我们还得需要一些CSS hack的知识，感兴趣同学可以看看 CSS hack，我们可以写出这样的CSS
.floatfix{
*zoom:1;
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
4 最后
虽然我们得出了一种浏览器兼容的靠谱解决方案，但这并不代表我们一定得用这种方式，很多时候我们的父容器本身需要position：absolute等形成了BFC的时候我们可以直接利用这些属性了，大家要掌握原理，活学活用。总而言之清理浮动两种方式
利用 clear属性，清除浮动
使父容器形成BFC
更多编程相关知识，请访问：编程学习网站！！
The above is the detailed content of How to clear floats in CSS? Introduction to Clear and BFC methods. For more information, please follow other related articles on the PHP Chinese website!