本文主要介绍了CSS浮动引起的高度塌陷问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
正常页面布局
基苦阿斯蒂芬
当给类名为.box的盒子加上浮动后
可以看到页面布局已经乱了,因为元素设置浮动后会脱离文档流
解决方案
1 利用BFC(给父元素加上overflow:hidden)
**缺点:父元素溢出的元素会隐藏,可能会影响页面显示 **
.content{ width:400px; border:1px solid #000; overflow: hidden; }
2 加空div
要点:
1.加上一个空的块级元素
2.对块级元素进行清除浮动, 省事方法,不管理是左浮还是右浮,直接全清(clear:both)
基苦阿斯蒂芬
3 利用伪元素
要点:
1 其实和加空div的原理是一致的,唯一要记住的就是把伪元素转为块级元素(display:block),否则会没有效果
2 还有伪元素的属性不要忘记加上(content:‘’)
基苦阿斯蒂芬
到此这篇关于CSS浮动引起的高度塌陷问题的文章就介绍到这了,更多相关CSS浮动高度塌陷内容请搜索0133技术站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持0133技术站!
以上就是CSS浮动引起的高度塌陷问题的详细内容,更多请关注0133技术站其它相关文章!