overflow及父级边框塌陷问题

父级边框塌陷问题：

clear：right 右侧不允许有浮动元素

clear：left 左侧不允许有浮动元素

clear：both两侧不允许有浮动元素

clear：none 可以让其浮动

 

解决方案

1、增加父级元素的高度

2、增加一个空的div标签，清除浮动

3、overflow 在父级元素中增加一个 overflow：hidden

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 <!--    overflow: hidden-->
 8 <!--    overflow: scroll-->
 9     <style>
10         #content{
11             border: 1px solid red;
12             overflow: hidden;
13         }
14         .w1{
15             display: inline-block;
16             float: right;
17         }
18         .wa{
19             display: inline-block;
20 
21             float: left;
22         }
23         p{
24             display: inline-block;
25 
26             float: left;
27 
28         }
29 
30     </style>
31 </head>
32 <body>
33 
34 <div id="content">
35     <img class="w1" src="1.png" alt="">
36     <img class="wa" src="2.gif" alt="">
37 
38     <p>
39         从前你穿越风雨仓促见一面从前你穿越风雨仓促见一面
40         从前你穿越风雨仓促见一面
41         从前你穿越风雨仓促见一面
42         从前你穿越风雨仓促见一面
43         从前你穿越风雨仓促见一面
44     </p>
45 
46 </div>
47 </body>
48 </html>
overflow

 

4、父类添加一个伪类：after

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 <!--    overflow: hidden-->
 8 <!--    overflow: scroll-->
 9     <style>
10         #father{
11             border: 1px solid red;
12 
13         }
14         #father:after{
15             content: '';
16             display: block;
17             clear: both;
18         }
19         .w1{
20             display: inline-block;
21             float: right;
22         }
23         .wa{
24             display: inline-block;
25 
26             float: left;
27         }
28         p{
29             display: inline-block;
30 
31             float: left;
32 
33         }
34 
35     </style>
36 </head>
37 <body>
38 
39 <div id="father">
40     <img class="w1" src="1.png" alt="">
41     <img class="wa" src="2.gif" alt="">
42 
43     <p>
44         从前你穿越风雨仓促见一面从前你穿越风雨仓促见一面
45         从前你穿越风雨仓促见一面
46         从前你穿越风雨仓促见一面
47         从前你穿越风雨仓促见一面
48         从前你穿越风雨仓促见一面
49     </p>
50 
51 </div>
52 </body>
53 </html>
伪类after

小结：

　　1、浮动元素后面增加空div

　　简单，代码中尽量避免空div

　　2、设置父元素的高度

　　简单，元素假设有了固定的高度，就会被限制

　　3、overflow

　　　　简单，下拉的一些场景避免使用

　　4、父类添加伪类推荐使用：after

　　　　

对比：

　　display ： 方向不可控制

　　float：方向可控  浮动会脱离标准文档流，要解决父级边框塌陷问题

 

posted @ 2022-03-28 23:15  doremi429  阅读(58)  评论(0)  编辑  收藏  举报