BFC的作用

最新推荐文章于 2023-08-11 08:19:37 发布

H_x

最新推荐文章于 2023-08-11 08:19:37 发布

阅读量104

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_43650979/article/details/106150113

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

0.BFC内部的特点

（1）上下两个盒子的margin折叠
（2）能够管理float元素（可计算float元素的宽高）
（3）BFC内的元素不会对BFC外的元素定位造成影响
（4）盒子的左边紧挨着BFC的左边

1.右边自适应的两栏布局

使用BFC前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<style>
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: red;
    }
    .right {
        height: 300px;
        background: green;
    }
</style>
<body>
<div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

在这里插入图片描述
使用BFC使红色块下方没有绿色块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<style>
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: red;
    }
    .right {
        height: 300px;
        background: green;
        overflow: hidden;
    }
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>

在这里插入图片描述
除了使用overfloat:hidden，还可以使用其他方式，只要是让右边的盒子产生BFC都可，产生BFC的方式：
（1）overfloat : 除了visible以外的值
（2）float：除了none以外的值
（3）position：除了static和reletive以外的值
（4）display: inline-block/table-cell/flex/table-caption/inline-flex

2.清除浮动

父元素高度塌陷：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    .box {
        border: 5px solid red;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
<div class="par">
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>
</html>

在这里插入图片描述
利用BFC清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
        overflow: hidden; /*方法1*/
        /*display: flex;*/ /*方法2*/
        /*display: inline-block;*/ /*方法3*/
        /*position: absolute;*/ /*方法4*/
        /*position: fixed;*/  /*方法5*/

    }
   /* .par::after{ !*方法6*!
        content: '';
        clear: both;a
        display: block;
    }*/
    .box {
        border: 5px solid red;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
<div class="par">
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>
</html>

在这里插入图片描述

H_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC的作用

0.BFC内部的特点（1）上下两个盒子的margin折叠（2）能够管理float元素（可计算float元素的宽高）（3）BFC内的元素不会对BFC外的元素定位造成影响（4）盒子的左边紧挨着BFC的左边1.右边自适应的两栏布局使用BFC前：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title>&l
复制链接

扫一扫