CSS浮动与清除浮动详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56787796/article/details/115602634

CSS浮动及清除浮动

浮动
清除浮动

浮动

<!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>浮动</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
      }
      /* 如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度 */
      /* 先用标准的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置 */
      /* 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流. */
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

清除浮动

<!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>清除浮动</title>
    <style>
      /* 伪元素清除浮动法 */
      /* .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      } */

      /* .clearfix { */
      /* IE6、7 专有 */
      /* *zoom: 1; */
      /* } */

      /* 双伪元素清除浮动 */
      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }

      .clearfix:after {
        clear: both;
      }

      .clearfix {
        *zoom: 1;
      }

      .box {
        /* 父元素清除浮动 */
        /* overflow: hidden; */
        /* 无法显示溢出的部分 */
        width: 500px;
        border: 1px solid black;
        margin: 0 auto;
      }
      .da {
        width: 200px;
        height: 200px;
        background-color: aqua;
        float: left;
      }
      .xi {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
      /* 额外标签法清除浮动
       .clear {
        clear: both;
      } */
      .footer {
        height: 200px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="da">溯琳</div>
      <div class="xi">琳玉</div>
      <!-- <div class="clear"></div> -->
      <!-- 必须是块级元素 -->
    </div>
    <div class="footer"></div>
  </body>
</html>

清除浮动

ps:图片来自黑马程序员