CSS梳理之流的破坏float与BFC

时间 2019-11-16

标签 css 梳理之流破坏 float bfc 栏目 CSS 繁體版

原文原文链接

“流”，文档流，是CSS中最基本的定位和布局机制。css

浏览器中的元素默认的从左到右（内联元素），从上到下（块级元素）如同流水通常堆砌的布局方式。html

1、float属性

float属性的特性以下:web

被设置了float属性的元素呈现包裹性，即其自身的width不是默认撑满父元素，而是和height属性同样由子元素决定。
被设置了float的元素会块状化并格式化上下文，简单来讲就是display的值变为block，并生成了一个BFC
由于生成了BFC，全部设置了float的元素垂直方向不会产生margin合并
脱离文档流，外在表现为高度塌陷，后面元素和其重叠。

前三个属性都是十分优秀的特性，可是第四个属性有些时候就会产生很大的问题，所以咱们在使用float的时候要考虑清除这种高度塌陷，以下图所示。浏览器

CSS部分代码：bash

.wreap{
  border: 1px solid #000000;
}
.size{
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}
.box{
  margin: 10px;
}
.box1 {
  background-color: blue;
}
.clear{
  clear: both;
}复制代码

HTML部分代码：布局

<body> <div class="wreap"> <div class="box size"></div> <div class="box size box1"></div> </div> </body>复制代码

浮动的清除

（1）clear：both清除浮动元素的浮动spa

代码在上述的基础上，就在具备box1样式的div下面增长了一个具备clear：both属性的divcode

<body> <div class="wreap"> <div class="box size"></div> <div class="box size box1"></div> <div class="clear"></div> </div> </body>复制代码

固然直接使用伪元素:alter能更优雅的实现清除浮动大体代码以下：orm

.wreap{
  border: 1px solid #000000;
}
.size{
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}
.box{
  margin: 10px;
}
.box1 {
  background-color: blue;
}
.clear:after{
  content: "";
  display: block;
  clear: both;
}复制代码

<body>
  <div class="wreap clear">
      <div class="box size"></div>
      <div class="box size box1"></div>
  </div>
</body>复制代码

能够吧clear:alter这一条写到全局样式，哪里须要清除浮动，直接在对应的位置加上clear便可。cdn

（2）经过构建BFC清除浮动

BFC的特性一下子会详细介绍，其中之一就是BFC会包含浮动的块，即其会被浮动的元素撑开。

因此将浮动元素的父元素变为BFC也能够解决浮动。

2、BFC

1.BFC是什么

BFC(Block Formatting Context) 格式化上下文，是web中盒模型的一种布局和css渲染模式，简单的来讲，就是构成了BFC的元素就如同上了个buff结界，其会变成了一个独立和外界隔绝的容器，不管内部如何折腾，都不会影响到外界，一样外界也影响不到他。

2.如何造成BFC

浮动元素会造成BFC，即全部float值部位none的元素
定位元素，position为absolute和fixed的元素
dispaly为inline-block，table-cell，table-caption的值（讲老实话，除了inline-block意外，另外两个比较少用）
overflow 除了 visible 之外的值（hidden，auto，scroll），其中hidden经常使用于浮动的清除。

3.BFC的特性

BFC内部的子元素会自左到右边（行内元素），自上而下（块级元素）排列，常规排列的子元素左外边距应该和包含块的左边缘接触，能够看做BFC内部有一个常规文档流。
由于内部能够看做有常规文档流，因此子元素块级元素见一样会发生margin在垂直方向的合并，解决方法就是让子元素也变成BFC
BFC呈现包裹性，自身计算宽高的时候，浮动的元素也会被计算进去，正是凭借这一特性，BFC也能够用来清楚浮动所带来的高度塌陷。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，一样外面天打雷劈也影响不到里面。