CSS浮动布局以及BFC布局的介绍

最新推荐文章于 2024-02-09 11:34:15 发布

叶子yes

最新推荐文章于 2024-02-09 11:34:15 发布

阅读量406

点赞数 2

分类专栏： html 前端文章标签： css html css3

本文链接：https://blog.csdn.net/lq313131/article/details/125943722

版权

前端同时被 2 个专栏收录

63 篇文章 8 订阅

订阅专栏

html

13 篇文章 1 订阅

订阅专栏

前言

什么是标准流？
标准流也称为文档流或者普通流。

标准流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流中。浏览器默认的排版方式就是标准流的排版方式。

在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版：
垂直排版, 如果元素是块级元素, 那么就会垂直排版；
水平排版, 如果元素是行内元素或者行内块级元素, 那么就会水平排版。

脱离标准流
如果希望块元素在页面中水平排列，可以使用float来使元素浮动，使块元素脱离标准流。

元素脱离标准流以后，它下边的元素会立即向上移动，那么这个时候前面一个元素就会盖住后面一个元素。

元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。

浮动的元素不会超过他上边的兄弟元素，最多一边齐。

所有元素经过浮动后都会变为行内块元素。

浮动布局

1、浮动流是一种"半脱离标准流"的排版方式。
2、浮动流只有一种排版方式，就是水平排版。它只能设置某个元素左对齐或者右对齐。

浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。如下图，我们可以利用浮动来做图文混排：

注意:
1、浮动流中没有居中对齐, 也就是没有center这个取值
2、在浮动流中是不可以使用margin: 0 auto;

浮动导致元素覆盖

元素脱离标准流以后，它下边的元素会立即向上移动，那么这个时候前面一个元素就会盖住后面一个元素，这一般发生在兄弟元素之间：

<style>
    div{
      width: 100px;
      height: 100px;
      background-color: blue;
    }
    .one{
      float: left;
    }
    .two{
      background-color: red;
    }
</style>

<body>
  <div class="one">我是一个div</div>
  <div class="two">我是一个div</div>
</body>

结果如下：
在这里插入图片描述
解决浮动元素覆盖问题的方法：
1、给被覆盖元素也设置浮动

.two{
      background-color: red;
      float: left;
    }

在这里插入图片描述
2、清除浮动

.two{
      background-color: red;
      clear: both;
    }

在这里插入图片描述
3、使用BFC（后面会介绍）

.two{
      background-color: red;
      /*使用 overflow: hidden; 可以触发BFC */
      overflow: hidden;
    }

在这里插入图片描述

浮动导致高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

<style>
    .parent{
      border: 10px solid red;
      margin: 10px;
    }
    .child{
      /* 设置浮动 导致高度塌陷 */
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: blue;
    }
</style>
  
<body>
  <div class="parent">hello css</div>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
  <div class="parent">hello css</div>
</body>

在这里插入图片描述
解决高度塌陷的方法：
1、给父元素定高度（不推荐）
2、在浮动元素下方设置空的块级元素，然后给它清除浮动
（使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构）

3、使用after伪类
（这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div）
在这里插入图片描述
4、使用BFC
（设置父容器为BFC）

BFC布局

1、概念
Block formatting context （块级格式化上下文）
我们可以把BFC看成元素的一种属性，只要元素拥有这个属性，就可以理解为一块独立的渲染区域，容器内的元素不会影响容器外的元素。

2、BFC布局规则

（1）内部的Box会在垂直方向一个接着一个地放置。
（2）Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
（3）每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
（4）BFC的区域不会与float box重叠。
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
（6）计算BFC的高度时，浮动子元素也参与计算。

3、如何触发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）

4、BFC作用

1、避免外边距重叠：
（1）兄弟元素外边距重叠（垂直方向外边距重叠）：把两个div包裹在两个不同container容器中，用overflow-hidden触发container的BFC
（2）父子级元素外边距重叠：把父元素设置成BFC

2、清除浮动：
父子级元素（子元素浮动后导致高度塌陷）：把父元素设置成BFC

3、避免元素被浮动元素覆盖
兄弟元素（一个设置浮动后，另一个被覆盖）：把被覆盖的那个设置成BFC

4、两列布局
左边定宽，右边自适应

<style>
.left {
      float: left;
      width: 300px;
      background-color: blue;
    }
.right {
      overflow: hidden;
      background-color: red;
    }
</style>

<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

5、三列布局
两边定宽，中间自适应

<style>
    *{
      margin: 0;
    }
    .left,.right{
      width: 200px;
      height: 500px;
      background-color: pink;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .center{
      overflow: hidden;
      /* margin: 0 200px; */
      height: 500px;
      background-color: red;
    }
</style>

<body>
  <div class="left">1</div>
  <div class="right">2</div>
  <div class="center">3</div>
</body>