要了解CSS浮动清除我们首先要认识三个问题。
1、什么叫浮动
- 浮动是指将元素脱离文档流向左或者向右布局。
- 使用float属性来设置元素浮动。
- 默认值为none，也就是不浮动；或设置right，表示向右浮动。
2、浮动的特点
- 一旦对元素设置浮动后，不论之前元素是内联元素还是块级元素，都会被当作块级元素处理。
- 一旦对元素设置浮动之后，该元素便会脱离标准流，会造成其父元素塌陷。
3、为什么要清除浮动
- 元素设置为浮动时引起父元素塌陷，影响布局效果。
例如：
<!DOCTYPE html>
结果：
原因：
因为我们给box内两个元素设置浮动之后，浮动元素会脱离标准流浮动于box之上，此时box父元素内部为空，所以导致父元素内容塌陷。
那么我们要如何才能避免子元素的浮动影响到父元素呢，以下给大家推荐几个方法。
方法一：指定父元素高度。
<!DOCTYPE html>
结果：
方法二：在浮动元素的最后面增加一个clear元素
<!DOCTYPE html>
结果：
方法三：在父元素上添加overflow属性，属性值设置为hidden。
<!DOCTYPE html>
结果：
企业级应用清除浮动最佳办法：使用clearfix方案，使用伪元素after在父元素尾部添加一个元素，对这个伪元素应用清除浮动样式。
<!DOCTYPE html>
结果
扫一扫
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
