2020.10.5 CSS 浮动注意点 浮动塌陷(消除浮动) ps切图

浮动注意点

1.子盒子 有一个浮动则所有盒子都浮动才能在一行上
2.浮动的盒子只会影响后面的标准流不会影响前面的标准流

为什么需要清除浮动:浮动塌陷

有些情况下父级大盒子不需要定义高度才能让更多子盒子装下.但如果没有高度,子盒子浮动后,父级大盒子就高度为0,这被称为浮动塌陷.
所以要清除浮动

清除浮动方法

1.给父级添加一个块级元素 (最不常用的方法,布局麻烦)

(float的子元素)

(float的子元素)

(float的子元素)

(添加一个块元素 并调用clear)

.clear{ clear: both; } 

2.给父级添加 overflow: hiden;

3.alter伪元素(常用)
复制粘贴即可

.clearfix:after{
content"";
display: block;
heigh: 0;
clear: both;
visibility: hidden;
}
.clearfix{ /*IE6、7专有 */
*zoom: 1;
}

再在父级div中调用clearfix

<div class="clearfix></div>

4.双伪类元素
before+after

.clearfix:after,clearfix:before{
content"";
display: block;
heigh: 0;
clear: both;
visibility: hidden;
}
.clearfix{ /*IE6、7专有 */
*zoom: 1;
}
再在父级div中调用clearfix

```html
<div class="clearfix></div>