标签:高度 lock highlight splay over display 行内元素 float bfc
清除浮动方式之伪元素清除法:
<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)
#小米导航案例
标签:高度 lock highlight splay over display 行内元素 float bfc
原文地址:https://www.cnblogs.com/zhujing666/p/12334175.html