css-清除浮动的方法

CSS - 清除浮动的方法

浮动带来的影响：

• 如果子元素浮动了，子元素就不能撑开标准流的块级父元素

原因：

​ - 子元素浮动后会脱离标准流，子元素此时不再占用位置，若此时父元素未设置高度，表现为父元素高度为0

清除浮动的方法：

1.额外标签法：在父元素最后添加一个块级元素，给该元素设置clear:both属性

​ 缺点：在页面中添加了额外的标签，使得页面结构发生了变化

2.单伪元素清除法：用伪元素替代额外标签，在父元素的最后添加一个块级元素

基本写法：

优点：直接对父元素使用，不添加新的标签，不会改变页面结构

3.双伪元素清除法：

优点：既能清除浮动，又能解决margin的塌陷问题

4.给父元素设置overflow:hidden