浮动、清除浮动、BFC模式

最新推荐文章于 2024-11-21 09:59:30 发布

apeman1024

最新推荐文章于 2024-11-21 09:59:30 发布

阅读量191

点赞数

文章标签： c语言 css html

本文链接：https://blog.youkuaiyun.com/zhizhenjin/article/details/121005193

版权

浮动、清除浮动、BFC模式

浮动

将一个元素的float属性设置为除none的其他属性值时，元素会脱离文档流，从而漂浮起来的形式，叫做浮动

没有浮动前的布局和代码

<!-- html结构 -->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

<!-- css内嵌样式 -->
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        border: 1px solid;
    }
    .left{
        width: 50px;
        height: 50px;
        background: cornflowerblue;
    }
    .right{
        width: 100px;
        height: 100px;
        background: chocolate;
    }
</style>

在这里插入图片描述

没有浮动前的布局和代码

<!-- html结构 -->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

<!-- css内嵌样式 -->
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        border: 1px solid;
    }
    .left{
        width: 50px;
        height: 50px;
        background: cornflowerblue;
        // 开启浮动
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background: chocolate;
    }
</style>

在这里插入图片描述

弊端

会导致父级元素出现父级塌陷的现象，就是在父级没有设置宽高时，父级元素没有被子级元素撑开，从而影响周围元素的布局

清除浮动的方式

通过为一个元素设置其clear的css属性为left或right、both，能够清除元素两边的浮动元素

处理父级塌陷的方式

为父级添加一个空元素，并设置空元素的`clear`属性为`both`

<!-- html结构 -->
<div class="box">
    <div class="outer"></div>
    <div class="empty"></div>
</div>

<!-- css内嵌样式 -->
<style>
    .box{
        border: 1px solid;
    }
    .box .outer{
        width: 200px;
        height: 200px;
        background: mistyrose;
        float: left;
    }
    .box .empty{
        clear: both;
    }
</style>

给父级设置宽和高

为父级添加一个`after`伪类

<!-- html结构 -->
<div class="box clear">
    <div class="outer"></div>
</div>

<!-- css内嵌样式 -->
<style>
    .box{
        border: 1px solid;
    }
    .box .outer{
        width: 200px;
        height: 200px;
        background: mistyrose;
        float: left;
    }
    .box.clear::after{
        content: "";
        display: block;
        width: 0;
        height: 0;
        clear: both;
    }
</style>

为父级设置`overfloat`为非`none`属性，开启父级的`BFC`模式

<!-- html结构 -->
<div class="box">
    <div class="outer"></div>
</div>
<!-- css内嵌样式 -->
<style>
    .box{
        border: 1px solid;
        overflow: hidden;
    }
    .box .outer{
        width: 200px;
        height: 200px;
        background: mistyrose;
        float: left;
    }
</style>

`BFC`模式

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC布局的规则

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

开启BFC模式

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

`BFC`作用

利用`BFC`处理margin重叠问题

<!-- html结构 -->
<body>
    <p>盒子1</p>
    <div class="box">
        <p>盒子2</p>
    </div>
</body>

<!-- css样式 -->
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p{
        width: 100px;
        height: 100px;
        background: mistyrose;
        margin: 30px;
    }
    .box{
        overflow: hidden;
    }
</style>

利用`BFC`制作两栏布局

<!-- html结构 -->
<body>
    <div class="box">
        <div class="box-left"></div>
        <div class="box-right"></div>
    </div>
</body>

<!-- css层叠样式 -->
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 500px;
        height: 500px;
        border: 1px solid;
    }
    .box .box-left{
        width: 100px;
        height: 400px;
        background: mediumspringgreen;
        float: left;
    }
    .box .box-right{
        height: 100%;
        background: mediumvioletred;
        overflow: hidden;
    }
</style>

利用BFC处理父级塌陷

<!-- html结构 -->
<div class="box">
    <div class="outer"></div>
</div>
<!-- css内嵌样式 -->
<style>
    .box{
        border: 1px solid;
        overflow: hidden;
    }
    .box .outer{
        width: 200px;
        height: 200px;
        background: mistyrose;
        float: left;
    }
</style>