网络前端学习路线分享CSS浮动——清除浮动篇,为什么要清除浮动
这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响。那么到底会有什么影响呢?
举个例子我们看一下。
<强>
强>
div0
div1
<强>
强>
div0
<强>
强>
aaa <强>高度塌陷强>。
我们其实是希望一个容器中的内容不断的撑开容器的高度,这样我们后续的内容就可以紧贴在上面了,而网页中的内容并不是都是静态的,很多都需要每天更新,更新的内容多少,图片高度,都不相同。那么后面的东西想要紧贴上面的内容,上面内容的高度就不能设置一个固定数值,否则很多数据的时候放不下。如果不设置高度,一旦设置浮动后,就会出现高度塌陷。丢失了高度后,页面后续的内容就会插在上面内容的底部,页面就会错乱,因此我们就需要做清除浮动来解决这个问题,最终做到即使使用浮动,外容器也会因为内容的多少自动撑开高度,不会高度塌陷。
margin设置值不能正确显示
强>
css填充
黄东海
黄东海强>
均
Box 盒子 ,display
1 块级框:display rmatting上下文
2 inline-level框:display
3 插入框:css3
格式context
黄东海(块格式化上下文)
强>
(1) 盒子
(2)盒子
(3) 保证金的盒子
范克廉(4)
范克廉(5)
(6) 均
均
黄东海强>
-
<李>
均
李>
这种不能考虑,因为都不是根元素
-
<李>设置高度李>
显然也是不可以的。
-
<李>浮
李>
本来就要设置浮动的,所以也不考虑
-
<李>位置
李>
这样设置后,就失去浮动的意义了。因此也不使用
-
<李>显示
李>
虽然可以开启,但是导致父元素原有宽度丢失
-
<李>溢出
李>
溢出
汽车
清除:两者间,顾名思义就是清除浮动
<强>
强>
明确:
因此我们做了一个修改
,,,,,,, 。
<强> clearFloat 强>:
<强> 强>后
<强>
强>
<>强,,,,,,,,强> {
,,,,,,,,,,,,
<强>显示强>:,
<强>块强>;
/*