标准流浮动 flex布局

呼叫6945

已于 2024-08-26 19:08:12 修改

阅读量959

点赞数 16

文章标签： html 前端

于 2024-08-11 11:38:56 首次发布

本文链接：https://blog.csdn.net/m0_73890048/article/details/141102448

版权

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

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

标准流

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

标准流

浮动

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

float布局示例

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

代码示例

<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>

效果示例

清除浮动方法

方法一:额外标签法

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

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

    <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>

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

     <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>

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

父元素添加 CSS 属性 overflow: hidden

    <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>