清除浮动的方法

方法一：父元素添加height属性

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         ul,ol{
12             list-style: none;
13         }
14         .box{
15             width: 800px;
16             height: 100px;
17             border: 10px solid red;
18         }
19         .box p{
20             float: left;
21             width: 100px;
22             height: 100px;
23             margin-right: 10px;
24             background: yellowgreen;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="box">
30         <p></p>
31         <p></p>
32         <p></p>
33         <p></p>
34     </div>
35     <div class="box">
36         <p></p>
37         <p></p>
38         <p></p>
39         <p></p>
40     </div>
41 </body>
42 </html>

优点是在知道子元素高度的情况下，写法简单设置方便。缺点是不知道子元素高度的情况下给父元素设置了高度，会影响子元素的显示情况，父元素的高度最好是由子元素的高度撑开。

 

方法二：受浮动影响的元素设置 clear:both

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         ul,ol{
12             list-style: none;
13         }
14         div{
15             width: 800px;
16             border: 10px solid red;
17             margin-bottom: 20px;
18         }
19         .box2{
20             clear: both; /*  left right both */
21         }
22         div p{
23             float: left;
24             width: 100px;
25             height: 100px;
26             margin-right: 10px;
27             background: yellowgreen;
28         }
29         /* .box1 .p1{
30             height: 200px;
31         } */
32     </style>
33 </head>
34 <body>
35     <div class="box1">
36         <p class="p1"></p>
37         <p></p>
38         <p></p>
39         <p></p>
40     </div>
41     <div class="box2">
42         <p></p>
43         <p></p>
44         <p></p>
45         <p></p>
46     </div>
47 </body>
48 </html>

优点是不需要在父元素中设置高度，缺点是父元素的高度不能被子元素撑开，而且要明确受浮动的元素是哪个。

 

方法三：外墙法，在俩个父元素中间加一个div（块元素）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         ul,ol{
12             list-style: none;
13         }
14         .box1,.box2{
15             width: 800px;
16             border: 10px solid red;
17             margin-bottom: 20px;
18         }
19         div p{
20             float: left;
21             width: 100px;
22             height: 100px;
23             margin-right: 10px;
24             background: yellowgreen;
25         }
26         .cl{
27             clear: both;
28         }
29         .h20{
30             height: 20px;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="box1">
36         <p></p>
37         <p></p>
38         <p></p>
39         <p></p>
40     </div>
41     <div class="cl h20"></div>
42     <div class="box2">
43         <p></p>
44         <p></p>
45         <p></p>
46         <p></p>
47     </div>
48 </body>
49 </html>

优点是可以无脑解决清除浮动后产生的影响，缺点是依然不能解决父元素被子元素撑开的问题。

 

方法四：内墙法 在每个父元素中添加div（块元素）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         ul,ol{
12             list-style: none;
13         }
14         .box1,.box2{
15             width: 800px;
16             border: 10px solid red;
17             margin-bottom: 20px;
18         }
19         div p{
20             float: left;
21             width: 100px;
22             height: 100px;
23             margin-right: 10px;
24             background: yellowgreen;
25         }
26         .cl{
27             clear: both;
28         }
29         
30     </style>
31 </head>
32 <body>
33     <div class="box1">
34         <p></p>
35         <p></p>
36         <p></p>
37         <p></p>
38         <div class="cl"></div>
39     </div>
40     <div class="box2">
41         <p></p>
42         <p></p>
43         <p></p>
44         <p></p>
45         <div class="cl"></div>
46     </div>
47 </body>
48 </html>

优点是可以无脑解决清除浮动后产生的影响，而且父元素可以被子元素的高度撑开，缺点是改变代码结构，容易产生css设置的问题。

 

方法五：溢出隐藏  父元素中添加样式 overflow: hidden

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         ul,ol{
12             list-style: none;
13         }
14         .box1,.box2{
15             width: 800px;
16             border: 10px solid red;
17             margin-bottom: 20px;
18             overflow: hidden; 
19         }
20         div p{
21             float: left;
22             width: 100px;
23             height: 100px;
24             margin-right: 10px;
25             background: yellowgreen;
26         }
27         div p.high{
28             height: 200px;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="box1">
34         <p></p>
35         <p></p>
36         <p class="high"></p>
37         <p></p>
38 
39     </div>
40     <div class="box2">
41         <p></p>
42         <p></p>
43         <p></p>
44         <p></p>
45 
46     </div>
47 </body>
48 </html>

优点：父元素可以被子元素高度撑开，且设置样式简单，不用改变代码结构。缺点是属性本意是为了隐藏溢出的内容，可能会让人产生歧义。

 

posted @ 2020-04-28 11:15  changxin.chen  阅读(169)  评论(0)    收藏  举报