CSS---解决元素浮动导致的父元素高度塌陷的问题

最新推荐文章于 2024-08-20 23:30:49 发布

maidu_xbd

最新推荐文章于 2024-08-20 23:30:49 发布

阅读量1.6k

点赞数

分类专栏： CSS 文章标签： float

本文链接：https://blog.csdn.net/maidu_xbd/article/details/89527229

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

元素浮动的特点:

（1）元素浮动以后会完全脱离文档流，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。

（2）如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素。

（3）浮动元素不会超过它上边的浮动的兄弟元素，最多一边齐。

（4）浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果。

（5）块元素脱离文档流以后，不会独自占一行，宽度和高度都被内容撑开。

（6）内联元素脱离文档流以后会变成块元素

高度塌陷：

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱

解决方法：

(1)浮动元素后添加<div class=”clear”></div>添加清除浮动样式，使用这种方式会在页面中添加多余的结构。

.clear{

clear:both

}


<body>
    <div id="div">
        <div id="div1"></div>
        <div id="div2"></div>
        <div class="clear"></div>
        <!--浮动元素后添加<div class=”clear”></div>添加清除浮动样式  -->
    </div>

</body>


<style>
        #div {
            width: 400px;
            background: #ccc;
        }

        #div1 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background: red;
            float: right;
        }

        .clear {
            clear: both
        }
    </style>

(2)使用after伪类，向父元素后添加一个块元素，并对其清除浮动。该种方式的原理和方法一原理一样，但是不用向页面中添加多余的结构。

   #div::after {
            content: "";
            display: block;
            clear: both
        }

(3)开启父元素的BFC，为父元素添加样式

overflow:hidden;

(4)手动为父元素添加高度。

maidu_xbd

关注

0
点赞
踩
3

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录