解决浮动引起的高度塌陷
程序员文章站
2022-04-09 19:42:50
当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开。但是当子元素设置浮动属性后,子元素会溢出到父元素外,父元素的宽高也不会被撑开了,称之为“高度塌陷”。 解决办法: 1.给父元素设置 overflow 添加 overflow 不仅减少了代码量,还不存在语义化的问题,但是也可能因为内容增加导致超 ......
当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开。但是当子元素设置浮动属性后,子元素会溢出到父元素外,父元素的宽高也不会被撑开了,称之为“高度塌陷”。
<div class="container"> <div class="box_1 float">box 1</div> <div class="box_2 float">box 2</div> </div>
.container { border: 3px solid #8990d5; } .box_1 { height: 100px; width: 100px; text-align: center; background-color: #ffb5bf; } .box_2 { height: 100px; width: 100px; text-align: center; background-color: #94e8ff; } .float { float: left; }
解决办法:
1.给父元素设置 overflow
添加 overflow 不仅减少了代码量,还不存在语义化的问题,但是也可能因为内容增加导致超出尺寸的内容被隐藏。仅设置
overflow: hidden;
为什么就能清除浮动呢?这里要引入一个概念:bfc(block formatting context),块级格式化上下文。bfc 的一个特性便是可以包含浮动元素,设置 overflow 为 hidden 满足了创建一个 bfc 的条件,其实就是创建 bfc,利用 bfc 固有特性清除浮动。
.container{
overflow: hidden;
zoom: 1; /* 兼容 ie6、ie7*/
}
2.使用 after 伪元素
:after 伪元素表示在元素之后添加内容。
该方法本质是在末尾添加一个看不见的块元素来清除浮动。这个方法不存在语义化的问题,是目前的主流清除浮动的方法。
.container::after { content: ''; clear: both; display: block; height: 0; visibility: hidden; } .container { border: 3px solid #ccc; zoom: 1; /* 兼容 ie6、ie7 */ }
上一篇: 经典面试题——两个线程交替打印奇数和偶数
下一篇: 蔬菜粥做法,宝妈们学学看!
推荐阅读
-
解决 .NET Core 中 GetHostAddressesAsync 引起的 EnyimMemcached 死锁问题
-
无法获取隐藏元素宽度和高度的解决方案
-
Android编程中聊天页面背景图片、标题栏由于键盘引起问题的解决方法
-
PHP中Session引起的脚本阻塞问题解决办法
-
C# 定时器保活机制引起的内存泄露问题解决
-
ScrollView与ListView合用(正确计算Listview的高度)的问题解决
-
电脑重启 更换CPU风扇引起的电脑自动重启解决方法
-
JS获取浮动(float)元素的style.left值为空的快速解决办法
-
解决在SQL脚本中的注释引起的奇怪问题
-
Windows与Linux换行符差别所引起的问题的解决方法