CSS之浮动与清除浮动

父子布局之清除浮动
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>
View Code

 

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>
overflow:hidden;

https://blog.csdn.net/qq_36595013/article/details/81810219 

https://blog.csdn.net/sunshine_yinger/article/details/83956158

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

posted on 2020-12-30 08:43  随风~旋  阅读(70)  评论(0)  编辑  收藏  举报

导航