父子布局之清除浮动
1.给父元素设置固定高度
缺点： 使用不灵活 后期不易维护
应用：网页中盒子固定高度区域，比如固定的导航栏
2.内墙法（了解）
规则： 在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear: both;
缺点： 结构冗余
3.伪元素（选择器）清除法(重要)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>清除浮动的方式</title> 6 <style type="text/css"> 7 .top_bar{ 8 border: 1px solid red; 9 } 10 .child1{ 11 width: 200px; 12 height: 100px; 13 background-color: green; 14 float: left; 15 } 16 .child2{ 17 width: 200px; 18 height: 100px; 19 background-color: orange; 20 float: right; 21 } 22 .header{ 23 width: 100%; 24 height: 100px; 25 background-color: purple; 26 } 27 .clear{ 28 /* 内墙法 */ 29 clear: both; 30 } 31 .clearfix::after{ 32 /* 伪元素清除法 */ 33 content:‘‘; 34 display: block; 35 clear: both; 36 } 37 38 </style> 39 </head> 40 <body> 41 <!-- 1.给父元素设置固定高度 42 缺点： 使用不灵活 后期不易维护 43 应用：网页中盒子固定高度区域，比如固定的导航栏 44 2.内墙法（了解） 45 规则： 在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear: both; 46 缺点： 结构冗余 47 重要： 48 3.伪元素（选择器）清除法 49 4.overflow:hidden; 50 --> 51 52 <!-- 伪元素清除法 --> 53 <div class="top_bar clearfix"> 54 <div class="child1">儿子</div> 55 <div class="child2">二儿子</div> 56 <!-- <div class="clear"></div> --> <!-- 内墙法 --> 57 </div> 58 <div class="header"> 59 60 </div> 61 62 63 </body> 64 </html>
4.overflow:hidden;(重要)
此种方式没有清除浮动 ,产生了BFC区域,使用了BFC的特性,使浮动元素参与高度计算
/*BFC区域 一条规则：计算BFC（块级盒子）的高度时，浮动元素也参与计算*/
/*形成BFC的条件： 除了overflow:visitable 的属性值*/
/*Block Formtting Context*/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>清除浮动的方式</title> 6 <style type="text/css"> 7 .top_bar{ 8 /*BFC区域 一条规则：计算BFC（块级盒子）的高度时，浮动元素也参与计算*/ 9 /*形成BFC的条件： 除了overflow:visitable 的属性值*/ 10 /*Block Formtting Context*/ 11 overflow: hidden; 12 border: 1px solid red; 13 } 14 .child1{ 15 width: 200px; 16 height: 100px; 17 background-color: green; 18 float: left; 19 } 20 .child2{ 21 width: 200px; 22 height: 100px; 23 background-color: orange; 24 float: right; 25 } 26 .header{ 27 width: 100%; 28 height: 100px; 29 background-color: purple; 30 } 31 32 </style> 33 </head> 34 <body> 35 36 37 <div class="top_bar clearfix"> 38 <div class="child1">儿子</div> 39 <div class="child2">二儿子</div> 40 41 </div> 42 <div class="header"> 43 44 </div> 45 46 47 </body> 48 </html>
同级别之清除浮动