css解决浮动之后高度塌陷的问题

makamkamakbakSOSO

于 2023-07-17 09:44:57 发布

阅读量68

点赞数

分类专栏： css学习文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/cainiaoyaya/article/details/131759311

版权

css学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题：

当子元素开启浮动之后，原本被子元素撑开的高度会塌陷导致后面元素位置上移

解决方法

1.开启BFC

BFC(Block Formatting Context)

- 块级格式环境

- 可以将bfc理解为一个隐藏的属性当开启bfc后元素会具备如下特征

1.开启bfc后子元素的垂直外边距不会传递给父元素

2.开启bfc后元素不会被浮动元素所覆盖

3.开启bfc后元素可以包含浮动的子元素

- 如何开启bfc呢？

1.需要用一些其他的样式来间接的开启bfc

- 由于bfc是通过一些样式开启的所以都会有一些副作用

而我们要做的就是找到一种可以开启bfc 同时副作用又比较小的

- 例如

1. 浮动会开启元素的bfc

2. 通过将overflow设置为一个非visible的值（开启了bfc）

<style>
        .box1{
            border: 1px solid #000;
            /* 利用overflow:auto来开启bfc 利用bfc的第三个特征  元素可以包含浮动的子元素
                从而解决父元素高度塌陷的问题
            */
            overflow: auto;
            
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

3. dispaly:flow-root 没有副作用

 <style>
        .box1{
            border: 1px solid #000;
            /* 利用display: flow-root来开启bfc 利用bfc的第三个特征  元素可以包含浮动的子元素
                从而解决父元素高度塌陷的问题  不兼容ie浏览器
            */
            display: flow-root;
            
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

2.利用clearfix

 <style>
        .box1{
            border: 1px solid #000;
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        /* 利用伪元素 clear的作用可以清除浮动给元素的样式造成的影响 
           由于伪元素本来是行内元素 所以利用dispaly来改变元素为块级元素
        */
        .box1::after{
            content: '';
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

makamkamakbakSOSO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css解决浮动之后高度塌陷的问题

而我们要做的就是找到一种可以开启bfc 同时副作用又比较小的。- 可以将bfc理解为一个隐藏的属性当开启bfc后元素会具备如下特征。- 由于bfc是通过一些样式开启的所以都会有一些副作用。当子元素开启浮动之后，原本被子元素撑开的高度会塌陷导致后面元素位置上移。- 如何开启bfc呢？
复制链接

扫一扫