CSS浮动与BFC,CSS盒模型居中方法

2021年09月15日 阅读数:1
这篇文章主要向大家介绍CSS浮动与BFC,CSS盒模型居中方法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

在子元素的某个元素添加clear:both属性后会清除前面的盒子的浮动,所以最开始我就熟悉用这种方法在父元素的最后面加上一个空盒子,而后定义类而且用于公用,看起来以下css


<div class="container">

    <div class="f_box"></div>

    <div class="f_box"></div>

    <div class="f_box"></div>

    <div class="clear"></div>

</div>

CSS代码:.html


.clear{clear:both;}

这样有须要就加上这个空盒子,可是这样就加了一大堆混淆内容的空盒子不利于内容与样式的分离,而后学习了css中:after这一属性后就采起所有用css来清除浮动了,html代码变为:前端


<div class="container clear">

    <div class="f_box"></div>

    <div class="f_box"></div>

    <div class="f_box"></div>

</div>

CSS代码:git


.clear:after{

    clear:both;

    content:'';

    display: block;

    height: 0;

    visibility: hidden;

}

这样后续只需在父元素中引入clear类就能够了,更加方便。面试

BFC

最近作项目时遇到布局问题,虽然本身实现了相关的界面,但导师指出这显然不是最优方案,而且介绍了BFC(Block Format Content),以前从未听过这个词,看后顿时以为本身以前的探索是多么的肤浅。markdown

w3c规范中的BFC定义:ide

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容建立新的BFC(块级格式上下文)。布局

在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中,每个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来讲,则触碰到右边缘)。学习

这也就是BFC提供了一个封闭的空间,而且BFC不会与浮动元素发生重叠。造成BFC的条件就有如下几点:.net

  1. float为 left|right

  2. overflow为 hidden|auto|scroll

  3. display为 table-cell|table-caption|inline-block

  4. position为 absolute|fixed

所以就能够利用它提供的封闭盒子来清除浮动,如给container类加css:



.container{overflow:hidden;}

### 最后

**一个好的心态和一个坚持的心很重要**,不少冲着高薪的人想学习前端,可是能学到最后的没有几个,遇到困难就放弃了,这种人处处都是,就是由于有的东西难,因此他的回报才很大,咱们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。

**[CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**

**分享一些前端面试题以及学习路线给你们**

![](https://s2.51cto.com/images/20210911/1631344848972856.jpg)

![](https://s2.51cto.com/images/20210911/1631344848856574.jpg)