CSS-浮动【看这一篇就够了】

浮动布局

浮动是如何工作的

把一个元素“浮动”起来，会改变该元素本身和正常布局流中跟随它的其他元素的行为
这一元素会浮动到左侧或右侧，并且从正常布局流中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕

简单理解：

当元素添加了浮动后，元素就会脱离文档流，按照指定方向(左右)发生移动，遇到父级边界或者相邻的浮动元素就会停下来，同时会影响到他后面元素的排版行为

文档流：文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)
脱离文档流：元素相当于漂浮起来，不占据页面的位置

浮动的本质和要点

浮动的本质功能：用来实现并排
浮动使用要点：要浮动，并排的盒子都要设置浮动
父盒子要有足够的宽度，否子盒子会掉下去

<style>
  .box {
    width: 600px;
    height: 200px;
    border: 1px solid #000;
  }

  /* 
        要点：要浮动，都浮动
        父盒子要有足够的宽度，否则子盒子会掉下去
    */
  .box .c1 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    float: left;
  }

  .box .c2 {
    width: 200px;
    height: 200px;
    background-color: gold;
    float: left;
  }

  .box .c3 {
    width: 200px;
    height: 200px;
    background-color: pink;
    float: left;
  }
</style>

<body>
  <h1>浮动</h1>

  <div class="box">
    <div class="c1">float: left;</div>
    <div class="c2">float: left;</div>
    <div class="c3">float: left;</div>
  </div>
</body>

效果：

如何产生浮动

给需要浮动的元素添加“float”属性，“float”属性对应的值如下：

值描述
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
inherit 规定从父元素继承float属性值(一般不用，了解即可)

值	描述
none	默认值，元素不浮动
left	元素向左浮动
right	元素向右浮动
inherit	规定从父元素继承float属性值(一般不用，了解即可)

元素浮动的特性

浮动共有七大特性

1.元素添加浮动后，脱离文档流

同时会影响其后面的元素，但不影响它前面的元素

<style>
  .box {
    width: 300px;
    height: 200px;
    border: 2px solid red;
  }
  .box1 {
    width: 100px;
    height: 50px;
    background-color: khaki;
  }
  .box2 {
    width: 200px;
    height: 50px;
    background-color: rgb(133, 206, 235, 0.5);
    /* 给元素添加左浮动 */
    /* float: left; */
  }
  .box3 {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>
<div class="box">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

正常布局流

box2(蓝色盒子浮动后的效果)

正常布局流中，块级元素默认从上往下

蓝色div加了浮动后，相当于漂浮起来，不占据页面空间，这时候蓝色盒子后面的粉色盒子的位置就会发生改变，移动到上面来，就出现如图，蓝色的盒子相当于漂浮在红色盒子上面。

但黄色盒子不受任何影响

(如果大家明白word文档里的“图片漂浮在文字下方”这个功能就好理解很多)

2.如果父元素的宽度不够

子元素在放不下的情况下会换行显示

<style type="text/css">
  .main {
    width: 240px;
    height: 150px;
    background-color: khaki;
  }
  .box {
    width: 50px;
    height: 50px;
    background-color: skyblue;
    margin: 10px;
    float: left;
  }
</style>
<body>
  <div class="main">
    <div class="box">框1</div>
    <div class="box">框2</div>
    <div class="box">框3</div>
    <div class="box">框4</div>
  </div>
</body>

效果：

3.浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找在前一个兄弟元素

	<style>
		.box {
		  width: 300px;
		  height: 200px;
		  border: 1px solid #000;
		}
	  
		/* 
			  浮动的顺序贴靠特性:
	  
			  子盒子会按顺序进行贴靠，
			  如果没有足够空间，则会寻找在前一个兄弟元素
		  */
		.box .c1 {
		  width: 200px;
		  height: 100px;
		  background-color: orange;
		  float: left;
		}
	  
		.box .c2 {
		  width: 100px;
		  height: 50px;
		  background-color: skyblue;
		  float: left;
		}
	  
		.box .c3 {
		  width: 50px;
		  height: 50px;
		  background-color: tomato;
		  float: left;
		}
	  </style>
	  
	  <body>
		<h1>浮动的顺序贴靠特性</h1>
	  
		<div class="box">
		  <div class="c1"></div>
		  <div class="c2"></div>
		  <div class="c3"></div>
		</div>
	  </body>

具体表现：

c3盒子贴靠c2盒子，但是c2盒子后面已经没有空间，因此c3盒子往前寻找float盒子，找到c1盒子，c1盒子后面还有空间，于是贴靠在c1后面。

但如果所有前方盒子的后方都没有空间，则重起一行摆放

效果：

4.元素浮动后，具有行内块级元素特性

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流
一律能够设置宽度和高度，即使它是“<span>”、“<a>”标签等等

<style>
  span {
    width: 100px;
    height: 30px;
    background-color: tomato;
    /* 
            只要设置了浮动的元素，不再区分块级元素和行内元素
            都能设置高度和宽度
        */
    float: left;
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
</style>

<body>
  <h1>浮动的元素一定能设置宽高</h1>

  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</body>

效果：

5.浮动的元素会造成父元素高度塌陷

当给子元素添加了浮动后，子元素相当于漂浮起来，不占据页面空间
这样就造成了腹肌元素在没有设置高度时，高度塌陷问题

一个塌陷的例子：

<style>
  .main {
    width: 200px;
    border: 2px solid red;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 添加浮动的前后对比 */
    float: left;
  }
</style>
<body>
  <div class="main">
    <div class="box"></div>
  </div>
</body>

效果：

box未设置浮动前效果	box设置浮动后效果

6.浮动对文字的影响

常见的图片文字环绕效果，其实现方式主要是将图片左浮动或有浮动
浮动后其相邻的文字，就会环绕图片排列
这与相邻的div盒子不同，浮动会漂浮在div盒子上，但是浮动不会漂浮在文字上

<style>
  .box {
    width: 200px;
    background-color: #ddd;
    padding: 10px;
  }
  .img {
    width: 80px;
    height: 80px;
    background-color: skyblue;
    float: left;
    margin: 10px;
  }
</style>
<body>
  <div class="box">
    <div class="img"></div>
    最初，引入float属性是为了能让 web
    开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边
  </div>
</body>

效果：

使用浮动实现网页布局

垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动
每一个盒子都是独立存在，每个盒子又是一个小天地，内部可以继续使用浮动

BFC规范和浏览器差异

BFC(Box Formatting Context，块级格式上下文) 是页面上的一个隔离的独立容器
容器里的子元素不会影响到外面的元素，分之亦然

如：一个盒子不设置height，当内容子元素都浮动时，无法撑起自身

原因是：“这个盒子没有形成BFC”

创建BFC

方法1：float的值不是none
方法2：position的值不是static或者relative
方法3：display的值是“inline-block”、“flex”、“inline-flex”
方法4：使用“overflow:hidden;”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建BFC</title>
    <style>
      .box {
        width: 500px;
        border: 5px solid red;
        /* 
            方法1：float的值不是none 
            该方法可以实现效果，但没有意义，不可能随意给盒子设置浮动
        */
        /* float: left; */

        /* 
            方法2：position的值不是static或者relative 
            该方法可以实现效果，但不靠谱
        */
        /* position: absolute; */

        /* 
            方法3：display的值是 inline-block、flex 或 inline-flex 
            该方法可以实现效果，但，没有意义，可能随便改变盒子的为行内块，获取其他的
        */
        /* display: inline-block; */
        /* display: flex; */
        /* display: inline-flex; */

        /* 
            方法4：overflow：hidden；
            该方法可以实现效果，但是，不能满足所有的场景
        */
        /* overflow: hidden; */
      }
      .box .c1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
      }
      .box .c2 {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
      }
    </style>
  </head>
  <body>
    <h1>创建BFC</h1>
    <p>
      BFC （Box Formatting Context
      ，块级格式上下文）是页面上的一个隔离的独立容器
    </p>

    <div class="box">
      <div class="c1"></div>
      <div class="c2"></div>
    </div>
  </body>
</html>

BFC的其他作用

BFC可以取消盒子margin塌陷
BFC可以阻止元素被浮动元素覆盖

<style>
  p {
    width: 200px;
    height: 200px;
    background-color: orange;
    /* 垂直方向上下margin会重合 距离依然是：50 */
    margin: 50px;
  }

  /* 
    BFC作用一：可以取消盒子margin塌陷
    添加overflow：hidden; 创建BFC
  */
  div {
    overflow: hidden;
  }

  /* 
    BFC作用二：可以阻止元素被浮动元素覆盖
    没有实际意义，实际开发不会这么用，只具有理论意义，要明白
    需要并排显示的盒子，要么都浮动，要么都不写，以下的写法是不合法规范的
  */
  .box1 {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    float: left;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: tomato;
    /* float: left; */
    overflow: hidden;
  }
</style>

<body>
  <div>
    <p></p>
  </div>

  <div>
    <p></p>
  </div>

  <section class="box1"></section>
  <section class="box2"></section>
</body>

清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

清除浮动的方法一共有四种

1.清除浮动方法1

让内部有浮动的父盒子形成BFC，它就能关住内部的浮动
此时，最好的方法就是”overflow:hidden;“属性

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    /* 
        清除浮动方法1：
        让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动
        此时，最好的方法就是 overflow: hidden; 属性
      */
    overflow: hidden;
    margin-bottom: 10px;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-right: 10px;
    float: left;
  }
</style>

<body>
  <div>
    <p></p>
    <p></p>
  </div>

  <div>
    <p></p>
    <p></p>
  </div>
</body>

效果：

2.清除浮动方法2

给后面的父盒子设置“clear:both;”属性
clear表示清除浮动对自己的影响，both表示左右浮动都清除

（该方法不推荐）

3.清除浮动方法3

使用”::after“伪元素给盒子添加最后一个子元素
并且给“::after”设置“clear:both”

（强烈推荐使用，最佳实践）

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    border: 2px solid red;
    margin-bottom: 20px;
  }

  /* 
      添加伪元素
      ::after 匹配选中的元素的最后一个子元素
    */
  .clearfix::after {
    content: "";
    clear: both;
    /* 转为块级元素 */
    display: block;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-right: 10px;
    float: left;
  }
</style>

<body>
  <div class="clearfix">
    <p></p>
    <p></p>
  </div>

  <div class="clearfix">
    <p></p>
    <p></p>
  </div>
</body>

4.清除浮动方法4

在两个父盒子之间“隔墙”个一个携带“clear:both”的盒子

（不推荐）

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    border: 2px solid red;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-right: 10px;
    float: left;
  }

  /* 
      清除浮动方法4：
      在两个父盒子之间 "隔墙" 隔一个携带 `clear: both;`的盒子
    */
  .cl {
    clear: both;
  }

  .h20 {
    height: 20px;
  }
</style>

<body>
  <div>
    <p></p>
    <p></p>
  </div>

  <!-- 在两个父盒子之间 "隔墙" 隔一个携带 `clear: both;`的盒子 -->
  <div class="cl h20"></div>

  <div>
    <p></p>
    <p></p>
  </div>
</body>

浮动布局

1.三列式布局，中间自适应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局</title>
	<style>
		body {
		  margin: 0;
		}
		.box {
		  width: 100%;
		  background-color: khaki;
		  padding: 10px;
		  box-sizing: border-box;
		}
		.box .left {
		  width: 150px;
		  height: 200px;
		  background-color: skyblue;
		  float: left;
		}
		.box .middle {
		  background-color: aquamarine;
		  height: 200px;
		  margin: 0px 160px;
		}
		.box .right {
		  width: 150px;
		  height: 200px;
		  background-color: pink;
		  float: right;
		}
		/*清除浮动*/
		.clearfix::after {
		  display: block;
		  content: "";
		  clear: both;
		}
	  </style>
	  <body>
		<div class="box clearfix">
		  <div class="left">左</div>
		  <div class="right">中</div>
		  <div class="middle">中</div>
		</div>
	  </body>
</html>

效果：

2.多行多列式布局

<style>
  .container {
    width: 800px;
    background-color: skyblue;
    margin: 0px auto;
    padding: 5px;
  }
  .item {
    width: 190px;
    height: 200px;
    background-color: khaki;
    float: left;
    margin: 5px;
  }
  /*清除浮动*/
  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
</style>
<body>
  <div class="container clearfix">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</body>

效果：