BFC以及清除浮动四种方式

什么是BFC

先了解常见的三种定位方案：

bfc是普通流：

可以将bfc看作是一个属性

2.如何触发bfc

1．根元素()

2．浮动元素(元素的float不是none)

3.绝对定位元素(元素的position为absolute 或 fixed)

4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group，table-header-group、table-footer-group、inline-table、flow-root、
flex或 inline-flex、grid 或 inline-grid

5.overflow值不为visible的块元素

6.contain值为layout、content 或 paint的元素

7.多列容器（元素的column-count或 column-width 不为auto，包括column-count为1)

3.bfc特性和作用

1.避免外边距重叠（块的上外边距margin-top和下外边距margin-bottom会合并为单个边距）

2.清除浮动

3.阻止元素被浮动元素覆盖

总结三点：

1.BFC的区域不会与float box重叠。

2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

3.计算BFC的高度时，浮动元素也参与计算

清除浮动的四种方法

1.额外标签法

在浮动元素后面添加一个新的空 div，这个空 div 的样式添加 clear：both。

语法:

 .clear {clear: both;} <div class="child1"></div> // 浮动元素<div class="child2"></div> // 浮动元素<div class="clear"></div>

优点：代码简洁。

缺点：添加了无意义的标签，结构化较差。

2.为父元素添加 overflow 属性

语法： 父元素选择器{ overflow：hidden | auto | scroll}

为父级元素添加 overflow 触发 BFC,BFC 可以清除浮动。

优点：内容简洁。

缺点：内容增多的时候容易造成不会自动换行，导致内容被隐藏掉，无法显示需要溢出的元素。

其实伪元素的原理和上面一样，相当于使用类来实现了上面第二种方法的功能

3.使用 after 伪元素清除浮动
语法：

.clearfix:after {display: block;content: '.';clear: both
}// ie6、ie7 浏览器的处理方式
.clearfix {*room: 1;
}

优点：符合闭合浮动的思想，结构语义化正确
缺点：ie6，ie7 不支持

4.使用 before 和 after 双伪元素清除浮动
语法：

  .clearfix:before,.clearfix:after {content: '';display: table;}.clearfix:after {clear: both;}

强烈推荐使用这种方式。

例题

我们的伪元素实现就相当于方法二的类的实现方法，本质还是在末尾添加我们写的东西！！！！

三个注意点！！
1.我们必须设置为块级元素
2.内容为“”
3.清除的方法就和第二种方式一样

BFC以及清除浮动四种方式相关推荐

在 HTML 中清除浮动四种的方法
文章目录为什么要清除浮动清除浮动本质什么是高度塌陷? 为什么会脱标? 一.清除浮动的语法二.清除浮动的方法 1.额外标签法 2.父级添加 overflow 属性 3.父级添加 after 伪元 ...
div清除浮动的四种方式
div 清除浮动的四种方式清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...
清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
安卓androidstudio访问本地接口_安卓开发之数据存储在本地的四种方式
安卓开发之数据存储在本地的四种方式本地数据存储,在安卓开发过程中是不可避免的一个话题.这些本地的数据可能是用户的设置,程序的设置,用户的数据图片, 也可能是网络传输的一些缓冲数据. 基本上我们有 ...
android四种点击事件,android点击事件的四种方式
android点击事件的四种方式第一种方式:创建内部类实现点击事件代码如下: package com.example.dail; import android.text.TextUtils; im ...
java配置文件实现方式_java相关：详解Spring加载Properties配置文件的四种方式
java相关:详解Spring加载Properties配置文件的四种方式发布于 2020-4-29| 复制链接摘记: 一.通过 context:property-placeholder 标签实现配 ...
Java遍历Map对象的四种方式
关于java中遍历map具体哪四种方式,请看下文详解吧. 方式一这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要时使用. 1 2 3 4 Map<Integer, Intege ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
解决存储过程中数据安全问题的四种方式
随着科技的不断发展,数据量也正在呈指数倍的增加.在这样一个大背景下,存储产品成为了时下市场中最热的产品.而数据的安全性也变得尤为重要.后端存储已经逐渐成为企业业务系统的核心和关键. 一般而言,我们有四 ...

BFC以及清除浮动四种方式

BFC以及清除浮动四种方式相关推荐

最新文章

热门文章