梳理浮动和BFC

最新推荐文章于 2022-08-18 05:08:15 发布

牛先森家的牛奶

最新推荐文章于 2022-08-18 05:08:15 发布

阅读量247

点赞数

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

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106075651

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

浮动：

float：定义网页中其他文本如何环绕该元素显示

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止

浮动的添加
float的属性值：

left （元素左浮动）
right （元素右浮动）
none （默认值，不浮动）
inherit （将会从父元素获取float值）

浮动的特点：

浮动的元素脱离文档流的，不占据空间
如果让多个元素横向排列，这些元素都要添加浮动
如果添加浮动的子元素总宽超过父元素的宽度，那么最后一个子元素就会被挤下来

注意：只要给子元素添加浮动，父元素一定要加高度，否则出现 “高度塌陷”

浮动的清除
clear的属性值：

none （允许两边都有浮动对象）
both （清除两边浮动）
left （清除左边浮动）
right （清除右边浮动）
inherit （将会从父元素获取float值）

如 clear：both 清除两边的浮动

其实说到浮动，第一反应的是高度塌陷，毕竟在代码中可能因为父元素高度的设置，不知不觉就出现了问题。
场景：子元素有浮动，父元素没有设置高度或者是设置了最小高度，此时父元素就会出现高度塌陷。
在这里插入图片描述

怎么消除高度塌陷呢？
解决方法：

给高度塌陷的元素设置overflow：hidden；
原理：overflow：hidden触发了一个BFC,BFC布局规范计算BFC高度的时候，里面的浮动元素也参与计算。
弊端：会隐藏掉定位在当前元素外面的内容
给出现高度塌陷的元素里面放在浮动元素后面，添加一个同级元素（比如空的div）并且给div加样式 div{clear：both；} （说清除会有些牵强，这里可以叫闭合浮动！！！）
原理：clear：both；忽略上面的浮动元素预留的空间
弊端：形成不必要的空标签，造成代码冗余
.clear_fix{clear：both；}
万能清除法：选择符（高度塌陷的元素）：after{content：“”；display：block；height：0；clear：both；overflow：hidden；visibility：hidden；}
算是优点：不会造成代码冗余，剩余代码性能优化，推荐使用。
设置父元素高度，就是给父元素固定高度对高度自适应的话，这样就不太灵活，所以不推荐使用

#box::after {
  content: ".";         /*生成内容作为最后一个元素，至于content里面是什么无影响*/
  display: block;       /*使生成的元素以块级元素显示，占满剩余空间*/
  height: 0;            /*避免生成的内容破坏原有空间的高度*/
  clear: both;          /*闭合浮动*/
  overflow:hidden;      /*溢出隐藏*/
  visibility: hidden;   /*使得生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
}

在这里插入图片描述

BFC

BFC(Block formatting context) 直译为"块级格式化上下文"。 它是一个独立的渲染区域，只有Block-level box（块）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

哪些元素或属性能触发BFC？

根元素(< html >)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
overflow 值不为 visible 的块元素
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group
table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

块级格式化上下文 BFC
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC的布局规则如下：

内部的盒子会在垂直方向，一个一个地放置
BFC是页面上的一个隔离的独立容器
属于同一个BFC的两个相邻Box的上下margin会发生重叠
计算BFC的高度时，浮动元素也要参与计算
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
BFC的区域不会与float重叠

BFC的应用

解决margin塌陷问题
也就是解决，在一个标准流body（body元素就是一个BFC）中相邻盒子之间垂直margin重叠的问题。
方法：触发其中一个盒子的BFC，成为一个独立的容器，根据BFC规则，这个盒子的布局不受外部元素影响。
解决高度塌陷问题
当一个标准流中的盒子中所有的子元素都进行了浮动，并且没有给盒子设置高度时，那么这个盒子的整个高度就会塌陷，浮动的子元素高度不计算在父元素内，父元素高度就为0。
方法：触发这个盒子生成BFC，根据规则计算BFC的高度时，浮动元素也参与计算。
例如：
1）设置父元素浮动;
2）使用clearfix;
3）在浮动元素后加个div设置clear: both; height:0,overflow:hidden
BFC实现自适应两栏布局

<style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
    }
    .left{
      width: 200px;
      height: 100%;
      background: pink;
      float: left;
    }
    .right{
      height:100%;
      background: blue;
      overflow: hidden;
    }
    .right .content{
      width:500px;
      height: 500px;
      background: green;
    }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right">
    <div class="content"></div>
  </div>
</body>

BFC实现双飞翼布局

 <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
    }
    .left,.right{
      width: 200px;
      height: 80%;
      background: pink;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .center{
      height: 100%;
      background: orange;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
  <!-- 因为center无浮动，占据空间 -->
</body>

那这里说一下不用BFC实现双飞翼布局的情况：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
    }
    .left,.right{
      width: 200px;
      height: 80%;
      background: pink;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .center{
      height: 100%;
      background: orange;
      padding: 0 200px;
    }
    .center_cont{
      height: 100%;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right"></div>
  <div class="center">
    <div class="center_cont"></div>
  </div>
</body>

牛先森家的牛奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
梳理浮动和BFC

浮动：float：定义网页中其他文本如何环绕该元素显示CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止浮动的添加float的属性值：left （元素左浮动）right （元素右浮动）none （默认值，不浮动）inherit （将会从父元素获取float值）浮动的特点：浮动的元素脱离文档流的，不占据空间如果让多个元素横向排列，这些元素都要添加浮动如果添加浮动的子元素总宽超过父元素的宽度，那么最后一个
复制链接

扫一扫