8 清除浮动方式/小米导航案例

Posted 2021-03-09 zhujing666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了8 清除浮动方式/小米导航案例相关的知识，希望对你有一定的参考价值。

清除浮动方式之伪元素清除法：

<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)　　

#小米导航案例

以上是关于8 清除浮动方式/小米导航案例的主要内容，如果未能解决你的问题，请参考以下文章