BFC解决的几种问题

最新推荐文章于 2024-03-23 00:06:53 发布

三生石上缘

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量1.2k

点赞数

分类专栏： HTML+CSS 文章标签： bfc解决几种问题

本文链接：https://blog.csdn.net/qq_43239707/article/details/97167633

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

外边距塌陷

原因：父子嵌套标签垂直方向的margin，margin会其中最大值

解决方法：

给父级设置border或者padding
改变父级元素bfc渲染模式

position:absolution/fixed

float:right/left

overflow:hidden

display:inline-bloack

浮动的问题

原因：标签浮动后脱离正常文档流，导致父标签无法被撑开，且会影响后续的布局

解决方法：

给父级设置高度
改变父级的bfc渲染模式：

清除浮动：clear:both
overflow:hidden;

伪元素：

父级标签：：after{
    content:'内容'；

    display:block;

    clear:both;

}

图片间隙问题

将图片显示为块元素（解决下方间隙）display:block
改变图片的vertical-align:middle/top/bottom
设置父级标签：(水平间隙)

font-size：0；

line-height:0;

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bfc.css">
</head>

<body>
    <!-- 外边距塌陷问题 -->
    <!-- 
        1.给父级添加padding或者border
        2.改变父级的bfc渲染模式
          -position:absolute/fixed;
          -添加浮动float
          -overflow:hidden
          -display:inline-bloack
     -->
    <div class="bigbox">
        <div class="smbox"></div>
        <!-- <div style="clear:both;"></div> -->
       
    </div>
    <div class="box"></div>



    <!-- 浮动问题 -->
    <!-- 
给标签设置浮动后，脱离正常文档流，导致父标签不能被撑起

1.给父级设置高度
2.改变父级的bfc渲染模式
  -清除浮动clear:both
  -overflow:hidden
  -伪元素
.bigbox:after{
    content: '';
    display: block;
    clear: both;
}

     -->

</body>

</html>

.bigbox{
    background-color: skyblue;
    width: 500px;

    /* 外边距塌陷问题 */
    /* margin-top: 100px; */
   /* border: 1px solid red; */
   /* padding: 100px; */
   /* position: absolute; */
   /* position: fixed; */
   /* float: left; */
   /* overflow:hidden */
   /* display:inline-block; */



   /* 浮动问题 */
   /* height: 300px; */
   /* overflow:hidden */
}
/* .bigbox:after{
    content: '';
    display: block;
    clear: both;
} */
.smbox{
    width: 200px;
    height: 200px;
    background-color: pink;
    float: left;
    /* margin-top: 50px; */
}
.box{
    width: 200px;
    height: 200px;
    background-color: orange;
    /* float: left; */
    /* margin-top: 50px; */
}

三生石上缘

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
BFC解决的几种问题

外边距塌陷原因：父子嵌套标签垂直方向的margin，margin会其中最大值解决方法：给父级设置border或者padding 改变父级元素bfc渲染模式position:absolution/fixedfloat:right/leftoverflow:hiddendisplay:inline-bloack浮动的问题原因：标签浮动后脱离正常文档流，导致父标...
复制链接

扫一扫