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

最新推荐文章于 2022-06-24 23:27:14 发布

工一木子

最新推荐文章于 2022-06-24 23:27:14 发布

阅读量181

点赞数

分类专栏： CSS学习文章标签： css html html5

本文链接：https://blog.csdn.net/Prince140678/article/details/120392779

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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

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

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录