跳至主要內容

浮动总结

大约 6 分钟

浮动总结

浮动的背景知识

float 属性最初只用于在成块的文本内浮动图像，让文字围绕图像，实现“图文环绕”的效果。

例子：

 <div class="box">
        <img src="https://anxinshaw.us.kg/hero.png" alt="Example" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla est magni odio impedit, libero excepturi nisi quaerat illo repellendus non porro ab at magnam illum eveniet fugit quibusdam vel consequatur laboriosam sunt rem tenetur repudiandae aliquam? Veritatis placeat ratione ad fuga, laudantium iste dolores atque! Distinctio quae sapiente quod modi.</p>
      </div>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        img{
            width: 100px;
            height: 100px;
        }

效果如下：

效果
效果

由于p标签默认是块级元素，所以p标签会独占一行，而img标签是行内元素，所以图片和段落是分开的。

当img标签设置浮动后，img标签会脱离文档流，不占据文档流的位置，所以p标签会向上移动，填补img标签的位置。

img{
    width: 100px;
    height: 100px;
    float: left;
}

效果如下：

效果
效果

当我们设置img标签浮动后，img标签会向左移动，直到遇到父元素的边缘或另一个浮动元素。

至此，形成了“图文环绕”的效果。

这就是浮动设计之初的用途。

浮动布局

两列布局

  <div class="container">
      <div class="left-column">
        <h2>左侧栏</h2>
        <p>这是左侧栏的内容。左侧栏占据30%的宽度。</p>
      </div>
      <div class="right-column">
        <h2>右侧栏</h2>
        <p>这是右侧栏的内容。右侧栏占据70%的宽度。</p>
      </div>
    </div>
      .container {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
      }

      .left-column {
        float: left;
        width: 30%;
        background-color: #f0f0f0;
        min-height: 300px;
      }

      .right-column {
        float: left;
        width: 70%;
        background-color: #e0e0e0;
        min-height: 300px;
      }

效果如下：

效果
效果

三列布局

    <div class="container">
        <div class="left-column">
          <h2>左侧栏</h2>
          <p>这是左侧栏的内容。左侧栏占据30%的宽度。</p>
        </div>
        <div class="center-column">
            <h2>中间栏</h2>
            <p>这是中间栏的内容。中间栏占据40%的宽度。</p>
        </div>
        <div class="right-column">
          <h2>右侧栏</h2>
          <p>这是右侧栏的内容。右侧栏占据30%的宽度。</p>
        </div>
      </div>
  .container {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
      }

      .left-column {
        float: left;
        width: 30%;
        background-color: #f0f0f0;
        min-height: 300px;
      }

      .center-column {
        float: left;
        background-color: #d0d0d0;
        min-height: 300px;
      }

      .right-column {
        float: left;
        width: 30%;
        background-color: #e0e0e0;
        min-height: 300px;
      }

效果如下：

效果
效果

浮动的特性

1. 脱离文档流

当元素设置浮动后，元素会脱离文档流，不占据文档流的位置，所以元素会向上移动，填补浮动元素的位置。

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

<div class="box2"></div>
.box{
    width: 100px;
    height: 100px;
    background-color: #f00;
    float: left;
}

.box2{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}

效果如下：

效果
效果

由于红色盒子设置了浮动，所以红色盒子会脱离文档流，不占据文档流的位置，所以蓝色盒子会向上移动，填补红色盒子位置。

2. 浮动元素互相贴靠

当两个浮动元素相邻时，会互相贴靠。如果宽度不够，则重启一行。

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

<div class="box2"></div>
 .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        float: left;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: #0f0;
        float: left;
      }

效果如下：

效果
效果

宽度不够时，后面浮动元素会被挤到下一行。

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

<div class="box2"></div>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        float: left;
      }

      .box2 {
        width: 2000px;
        height: 200px;
        background-color: #0f0;
        float: left;
      }

效果如下：

效果
效果

3. 宽度收缩/高度坍塌

当浮动元素没有设置宽度时，浮动元素的宽度会收缩，收缩到内容宽度。
当浮动元素没有设置高度时，浮动元素的高度会坍塌，坍塌到内容高度。

    <div class="box">1</div>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, unde!</p>
 .box {
        background-color: #f00;
        float: left;
      }

效果如下：

效果
效果

本来div标签是独占一行的，但是由于设置了浮动，所以div标签会收缩到内容宽度。而p标签是行内元素，所以p标签会和div标签在同一行。

清除浮动

元素浮动之后，周围的元素会重新排列，所以我们需要清除浮动。

1. 给父元素添加高度

给父元素添加高度，这样父元素就不会因为浮动元素的高度坍塌而高度为0。

 <ul>
        <li>Lorem.</li>
        <li>Numquam.</li>
        <li>Quia?</li>
    </ul>
        ul {
            list-style: none;
            background-color: #ccc;
            height: 100px;
        }
        li {
            float: left;
        }

效果如下：

效果
效果

如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。

2. 使用clear属性

使用clear属性，可以清除浮动。

clear属性有三个值：

  • left：清除左侧浮动
  • right：清除右侧浮动
  • both：清除两侧浮动
    <h3>1. 使用clear属性清除浮动</h3>
    <div class="container">
      <div class="box">1</div>
      <div class="clear"></div>
      <p>使用clear:both清除浮动</p>
    </div>
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        float: left;
      }
    .clear{
        clear: both;
      }

效果如下：

效果
效果

3. 隔墙法

隔墙法，就是在浮动元素后面添加一个空的div，然后给这个div设置clear属性，这样就可以清除浮动。

    <div class="box"></div>
    <div class="clearfix"></div>
	<div class="box2"></div>
.clearfix{
    overflow: hidden;
}

效果如下：

效果
效果

4. 内墙法

内墙法，就是在浮动元素后面添加一个空的div，然后给这个div设置overflow:hidden属性，这样就可以清除浮动。

    <div class="box">
        <p></p>
        <div class="clearfix"></div>
    </div>
    .box{
        background-color: #f00;
      	}
      p {
        width: 100px;
        height: 100px;
        background-color: #00f;
        float: left;
      }
      .clearfix{
        overflow: hidden;
      }

效果如下：

效果
效果

5.overflow:hidden

overflow:hidden可以清除浮动，因为overflow:hidden会创建一个新的BFC，BFC可以关住浮动。

    <div class="box">
      <p></p>
  .box {
        overflow: hidden;
      }
      p {
        float: left;
        width: 100px;
        height: 100px;
        background: #f00;
      }

效果如下：

效果
效果

6. 使用伪元素清除浮动

使用伪元素清除浮动，就是为父元素添加一个伪元素，然后给这个伪元素设置clear属性，这样就可以清除浮动。

    <div class="box">
      <div class="float-item">浮动元素</div>
      <div class="text">
        这是一段文本内容，可以看到容器被正确撑开了。这是一段文本内容，可以看到容器被正确撑开了。
      </div>
    </div>
  .box {
        background-color: #f0f0f0;
        border: 1px solid #999;
        padding: 10px;
      }
      .box::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
      }
      .float-item {
        width: 100px;
        height: 100px;
        background-color: #ff9999;
        float: left;
        margin: 10px;
      }

效果如下：

效果
效果

浮动的现状

浮动在现代布局中已经很少使用，因为浮动布局的兼容性问题，现在布局主要使用flex布局和grid布局。

浮动总结

  • 浮动元素脱离文档流，不占据文档流的位置，所以浮动元素会向上移动，填补浮动元素的位置。
  • 浮动元素相邻时，会互相贴靠。如果宽度不够，则重启一行。
  • 浮动元素没有设置宽度时，浮动元素的宽度会收缩，收缩到内容宽度。浮动元素没有设置高度时，浮动元素的高度会坍塌，坍塌到内容高度。
  • 清除浮动的方法有：
    • clear 清除浮动（添加空 div 法）在浮动元素下方添加空 div，并给该元素写 css 样式 {clear:both;height:0;overflow:hidden;}
    • 给浮动元素父级设置高度
    • 父级同时浮动（需要给父级同级元素添加浮动）
    • 父级设置成 inline-block，其 margin: 0 auto 居中方式失效
    • 给父级添加 overflow:hidden 清除浮动方法
    • 万能清除法 after 伪类清浮动（现在主流方法，推荐使用）