标准流浮动 flex布局

标准流

浮动

清除浮动

清除浮动方法

方法一:额外标签法

方法二:单伪元素法(直接复制粘贴)

方法三:双伪元素法(推荐) => 可以直接复制粘贴放到清除全局样式里

方法四:overflow => 设置该属性后浏览器会检查父级范围,自然高度也会被检测到

浮动总结:

Flex布局

Flex-组成

主轴对齐方式

Flex-组成

侧轴对齐方式

修改主轴方向

其他

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

标准流

浮动

作用: 让块元素水平排列
属性名: float
属性值: left:左对齐 right:右对齐
特点: 1.浮动后的盒子顶对齐 2.浮动后的盒子具有行内块特点 3.浮动后的盒子脱标,不占用标准流的位置

float布局示例

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）解决方法：清除浮动（清除浮动带来的影响）

代码示例

<!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>
  .father {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; */
    background-color: pink;
  }

  .left {
    float: left;
    width: 200px;
    height: 300px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 950px;
    height: 300px;
    background-color: orange;
  }

  .bottom {
    height: 100px;
    background-color: brown;
  }

</style>
</head>
<body>
<div class="father">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>

效果示例

清除浮动方法

方法一:额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

方法二:单伪元素法(直接复制粘贴)

<!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>
    .father {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

    /* 单伪元素法 */
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  </style>
</head>
<body>
  <div class="father clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></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>
    .father {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

    /* before 解决外边距塌陷问题 */
    /* 双伪元素法 */
    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
    }

    /* after 清除浮动 */
    .clearfix::after {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="father clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

方法四:overflow => 设置该属性后浏览器会检查父级范围,自然高度也会被检测到

父元素添加 CSS 属性 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>清除浮动-overflow</title>
  <style>
    .father {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;

      overflow: hidden;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

  </style>
</head>
<body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>