告别布局间隙：浮动(float)在网页排版中的高阶应用

传统网页布局的三种方式

标准流（普通流/文档流）
浮动
定位

常见的三种布局

水平布局
浮动布局
弹性布局

标准流（普通流/文档流）

所谓标准流就是按照规定好的默认方式排列
指的就是浏览器从上到下，从左到右排列的元素

不同标签元素有不同的默认排列方式，标签分为三大元素：行内元素、块级元素、行内块级元素

1.块级元素会独占一行，从上向下顺序排列

常用元素：div、hr、p、h1-h6、ul、dl、form、table

2.行内块级元素会按照顺序，从左往右顺序排列，碰到父元素边缘则自动换行

常用元素：span、a、i、em等

浮动布局

浮动可以使文字环绕图片

为什么需要浮动：如何让多个块级元素排列成一行？可以设置div为行内块，但是有个缺点会使得div之间有间隙，如何去除间隙呢？如何实现两个盒子得左右对齐？如何使得文字环绕图片呢？

这些浮动都可以解决：浮动可以使得多个块级元素一行内排列显示

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
.box1{
      width: 200px;
  height: 200px;
  background-color: pink;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: blue;
}
  </style>
</head>
<body>
  <div class="box1">浮动的盒子</div>
  <div class="box2">标准流的盒子</div>
</body>
</html>

结果图：当添给box1加上浮动设置

js 复制代码

 .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

结果图：

js 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      span {
        
        width: 200px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <span></span>
  </body>
</html>

这里给span加上宽高也没有显示出结果，行内元素设置不了宽高如下：添加float之后：

js 复制代码

  span {
        float: left;
        width: 200px;
        height: 100px;
        background-color: pink;
      }

如果行内元素有了浮动，则不需要转化为块级\行内块元素就可以直接给高度和宽度

js 复制代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      p {

        height: 100px;

        float: left;

        background-color: pink;

      }

      .box {

        width: 200px;

        height: 200px;

        background-color: red;

      }

      .box1 {

        width: 200px;

        height: 200px;

        background-color: bisque;

      }

      div {

        float: left;

      }

    </style>

  </head>

  <body>

    <div class="box"></div>

    <div class="box1"></div>

    <p>p</p>

  </body>

</html>

结果图：这里每种标签元素的外边距不一样所以p标签看上去没有顶对齐

知道为什么需要浮动，那么什么是浮动呢？

float属性用于创建浮动框，将其移动到一边，直到左边缘或则右边缘触及包含块或另一个浮动框的边缘当包含块内有两个div标签，第一个div设置左浮动会靠包含块的内左边，设置第二个div为左浮动时，会紧靠第一个div,因为它们是兄弟关系。当设置第二个div为右浮动时第一个div右浮动会靠包含块的内右边语法：选择器{float:属性值}属性值有none left(元素向左浮动) right 选择器这里就不再赘述了

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动，

浮动特性

1.浮动元素会脱离标准流（脱标）

脱离标准普通流的控制（浮）移动到指定位置（动）(浮动)
浮动的盒子不在保留原先的位置

2.浮动元素会一行内显示并且元素顶部对齐(不同种标签的外边距不同导致看上去顶部不对齐)

-如果多个盒子都设置了浮动，它们会按照一定属性值一行内显示并且顶端对齐排列注意：浮动元素是相互贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

3.浮动的元素会具有行内块元素的特性

-任何元素都可以浮动，而且不管原来是什么模式的元素，添加浮动之后具有行内块元素相似的特性 -如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 -浮动的盒子中间是没有缝隙的，是紧挨的

为什么要清除浮动有时我们的盒子里的内容不确定，不方便设置高度，父容器高度由我们子容器来决定，但子容器浮动就不占有位置，父容器的高度就为0，就会影响下面的标准流盒子。

清除浮动的本质：

清除浮动的本质是清除浮动造成的影响
如果父盒子本身有高度，就不需要清除浮动
清除浮动之后，父级元素会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了清除浮动: 选择器{clear：属性值;}

那清除浮动的方法有哪几种？

1.额外标签法（隔墙法）不常用

-在浮动元素尾添加一个新标签设置清除浮动，来闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子注意：添加的新标签必须是块级元素

js 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        width: 300px;
        height: 100px;
        float: left;
        /* ul的高度为0 脱离了文档流 */
        /* 行内块 */
      }
      /* inline行内元素不可以设置宽高 */
      li:nth-child(1) {
        background-color: pink;
      }
      li:nth-child(2) {
        background-color: blue;
      }
      li:nth-child(3) {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div class="clear"></div>
    </ul>
    <h2 class="title">你好</h2>
  </body>
</html>

style添加如下：

js 复制代码

 .clear {
        clear: both;
      }

结果图：

2.父级添加:after伪元素(升级版的额外标签法)

添加如下代码：

js 复制代码

    .list::after {
        content: "";
        clear: both;
        display: block;
      }
      
      .list{/*IE6、7专有 如百度淘宝网易*/
      *zoom
      }

这里after伪元素默认是行内元素，要改为块级显示
一定要有content
设置清除浮动

3.给被浮动影响的容器做清除浮动

-clear:both 不推荐（子之错，父之过，但是这里却怪别人）

js 复制代码

 .title{
        clear:both
      }

4.父级元素添加overflow属性,设置为BFC容器

添加如下代码：

js 复制代码

  .list {
        /* height: 100px; */
        overflow: hidden;
      }

也可得到如上结果图 overflow不仅可以清除浮动还可以防止盒子外边距合并缺点：无法显示溢出的部分

这里详细讲讲BFC容器添加overflow,将浮动元素的父容器设置为 BFC 容器 ---推荐

块级格式化上下文 (类比 js 中的块级作用域) #BFC-block formatting context

1.默认情况下，子容器的 margin-top 和父容器的 margin-top 重叠

子容器外边框50px、父容器外边距100px，按理父容器距离上边框100px,子容器距离父容器上边框50px，但这个是两个容器上边框距离window上边框都是100px 如下

js 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .parent {
        height: 500px;
        background-color: pink;
        margin-top: 100px;
      }
      .child {
        height: 200px;
        background-color: red;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

2.BFC 用来解决这个问题

给父容器添加overflow:hidden

如何创建 BFC 容器： 1.overflow:hidden||auto||scroll|overlay 2.position:absolute||flexd 3.display:inline-xxx||flex||grid 4.float:left||right

BFC 容器的特点:

1.当一个容器设置成 BFC 容器后，它会有一套独立的渲染规则
2.子容器的 margin-top 不会和父容器的 margin-top 重叠 3.BFC 容器在计算高度是，会包含浮动元素的高度

总结

浮动布局的核心价值：解决行内块间隙/实现多列排版/图文环绕
使用要点：clear清除浮动、触发BFC避免塌陷、父级高度自适应方案
"浮动如同CSS海洋中的救生圈：虽不是最新潮的冲浪板，但当你坠入布局深水区时，它永远是可靠的生存工具"
"你在浮动布局中踩过哪些坑？欢迎在评论区分享你的血泪史 →"

告别布局间隙：浮动(float)在网页排版中的高阶应用

标准流（普通流/文档流）

1.块级元素会独占一行，从上向下顺序排列

2.行内块级元素会按照顺序，从左往右顺序排列，碰到父元素边缘则自动换行

浮动布局

浮动特性

1.浮动元素会脱离标准流（脱标）

2.浮动元素会一行内显示并且元素顶部对齐(不同种标签的外边距不同导致看上去顶部不对齐)

3.浮动的元素会具有行内块元素的特性

1.额外标签法（隔墙法）不常用

2.父级添加:after伪元素(升级版的额外标签法)

3.给被浮动影响的容器 做清除浮动

4.父级元素添加overflow属性,设置为BFC容器

1.默认情况下，子容器的 margin-top 和父容器的 margin-top 重叠

2.BFC 用来解决这个问题

BFC 容器的特点:

总结

3.给被浮动影响的容器做清除浮动