清除浮动方式之伪元素清除法：
<style type="text/css">
.top_bar{
height: 200px;
border:1px solid red;
}
.child1{
width:200px;
height:200px;
background-color: green;
float: left;
}
.child2{
width: 200px;
height:200px;
background-color: orange;
float: right;
}
.header{
width: 100%;
height:100px;
background-color: purple;
}
.clear{
clear:both;
}
p::after{
/*行内元素*/
content:‘大帅哥‘;
}
.clearfix::after{
content:"";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 1给父元素设置固定高度
缺点： 使用不灵活 后期不易维护
应用 网页中盒子固定高度区域，比如固定的导航栏
2 内墙法
规则：在最后一个浮动元素的后面加一个空的块元素， 并且设置该属性clear:both;
缺点： 结构冗余
3 伪元素（选择器）清除(重点)
4 overflow: hidden;（重点）
-->
<div class="top_bar clearfix">
<div class="child1">大儿子</div>
<div class="child2">二儿子</div>
<div class="clear"></div>
</div>
<div class="header">
</div>
<p>
<a href="#">百度一下</a>
</p>
</body>
</html>
#清除浮动方式之overflow
# BFC (Blocking Formatting Context)
#小米导航案例
原文地址：https://www.cnblogs.com/zhujing666/p/12334175.html
时间： 2024-11-23 23:57:11