清除浮动的方法之额外标签法
1.额外标签法也称为隔墙法,是W3C推荐的做法
具体方法:在浮动元素末尾添加一个空的标签,例如`<div style="clear: both"></div>`
(个人理解 额外标签法的原理:此时该标准流不会被前面的浮动元素所影响,所以该标准流就会另起一行排列,因此会撑开父级盒子,由于该标准流为空白标签不占位置,不影响父级盒子撑开的大小。即父级盒子的高度由浮动子元素撑开)
下面为验证方法
核心代码
<style>
.box {
width: 400px;
background-color: pink;
}
.box .damao {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box .ermao {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box .clear {
clear: both;
}
</style>
<body>
<div class="box">
<div class="damao"></div>
<div class="ermao"></div>
<!-- 验证额外标签法的原理 -->
<div class="clear">123</div>
</div>
</body>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
