2020.10.5CSS 浮动注意点浮动塌陷(消除浮动)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>