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 @   doremi429  阅读(77)  评论(0)  编辑  收藏  举报
相关博文：
·  display和浮动
·  文本阴影和超链接伪类
·  overflow及父级边框塌陷问题
·  父级边框塌陷的问题
·  18 overflow 和父级元素边框塌陷
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手