码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-02-20 09:52:22      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:高度   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)  

#小米导航案例

 

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

标签:高度   lock   highlight   splay   over   display   行内元素   float   bfc   

原文地址:https://www.cnblogs.com/zhujing666/p/12334175.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!