18、overflow及父级边框塌陷问题

最新推荐文章于 2022-02-24 15:02:50 发布

原创最新推荐文章于 2022-02-24 15:02:50 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

CSS学习专栏收录该内容

24 篇文章

订阅专栏

本文介绍了CSS中常见的父级边框塌陷问题及其四种解决方案：设定父级高度、使用清除浮动的空div、利用overflow属性及伪元素:after。通过这些方法可以有效解决因元素浮动导致的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5.4、父级边框塌陷问题

clear

/**
clear: left; 左侧不允许有浮动元素
clear: right; 右侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
 */

解决方案

1.增加父级元素的高度

#father {
    border: 1px #000 solid;
    height: 800px;
}

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

 <div class="clear"></div>

.clear {
    clear:both;
    margin:0;
    padding:0;
}

3.overflow

在父级元素中增加一个 overflow:hidden;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #content {
                width:200px;
                heigth:150px;
                overflow:scroll;/*hidden scroll auto*/
            }
        </style>
    </head>
    <body>
        <div id="content">
            <img src="images/1.jpg" alt="">
            <p>
                《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。
            </p>
        </div>
    </body>
</html>

4.父类添加一个伪类:after【避免添加空div】

#content:after {
    content:'';
    display:block;
    clear:both;
}

小结：

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

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

2.设置父元素的高度

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

3.overflow

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

4.父类增加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用！

5.5、对比

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题