LERNB

流式布局与浮动原理及BFC

头像
ler
2020-08-07  

标准流、流式布局

网页内元素按照从左至右、从上到下的顺序排列的方式就是流式布局

元素的浮动

什么是浮动

设置了float属性的元素会脱离标准文档流的控制并移动到其父元素指定位置的过程。
通过float属性来定义浮动，选择器{float：none | left | right}

浮动的特性：

  • 浮动的元素会脱离实际的文档流，不再占用标准流的空间，但会影响文档流中文字的排版，且浮动只有左右浮动

  • 浮动的排列方式也是按照流式布局，如果当前浮动元素的前一个元素也是浮动元素，则当前浮动元素浮动后会紧挨着前一个浮动元素，顶部与顶部对齐，左边或者右边对齐；如果前一个元素是标准文档流元素，则当前浮动元素浮动后其顶部会与标准流元素的底部对齐（多栏布局需要注意元素的书写位置）

  • 浮动后的元素具有包裹性，未设置宽高属性，其默认宽高就是内容的宽高

  • 浮动后的元素具有破坏性，会造成原布局的内容高度塌陷，可以通过给浮动元素的父元素设置属性overflow：hidden使父元素具有包裹性

清除浮动

给元素设置clear: left | right | both属性清除浮动

<div class="banner">banner</div>
 <div class="center">
   <div class="left">left</div>
   <div class="right">right</div>
   <div class="main"></div>
 </div>
 <div class="footer">footer</div>
<style>
   .banner {
     border: 1px solid red;
     height: 200px;
     background-color: red;
   }

   .center {
     border: 1px solid yellow;
     /* 方法一：父容器div overflow:hidden闭合浮动 */
     overflow: hidden;
   }

   .left {
     border: 1px solid blue;
     height: 500px;
     width: 100px;
     float: left;
     background-color: blue;
   }

   .right {
     border: 1px solid lawngreen;
     height: 600px;
     width: 100px;
     float: right;
     background-color: lawngreen;
   }

   .main {
     background-color: aqua;
     margin: 0 104px;
     height: 500px;
   }

   .footer {
     border: 1px solid black;
     height: 200px;
     /* 方法二：clear清除浮动 */
     /* clear: both; */
     background-color: black;
   }
 </style>

闭合浮动与BFC

闭合浮动就是触发元素的BFC（Block Formatting Context）块级格式化上下文，触发了BFC的元素就具有了包裹性，即使里面的子元素是浮动的

触发BFC：

  • float属性值不为none

  • display为block或者table

  • overflow属性值不为visible

  • position属性值为absolute或者fixed

  • 新出的属性display:flow-root，兼容性差

触发了BFC的元素形成了一个独立的布局环境，内部布局与外部布局互不影响，里面的子元素不会影响父元素的布局，但是子元素的子元素如果是浮动的就无法包裹。

BFC的常见作用：

  • 解决父元素高度塌陷的问题：

    通常父元素的高度会被子元素撑开，如果父元素没有设置高度，子元素是浮动的话，由于子元素浮动脱离了文档流，父元素高度为0就会出现高度塌陷的问题，此时可以给父元素设置BFC使之产生独立的布局空间闭合浮动。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box {
      width: 1226px;
      background-color: red;
      margin: 0 auto;

      /*设置了一个BFC区域*/
      overflow: hidden;

    }

    .child1 {
      width: 300px;
      height: 100px;
      background-color: green;
      float: left;
    }

    .child2 {
      width: 300px;
      height: 100px;
      background-color: blue;
      float: right;
    }
  </style>
</head>

<body>
  <div class="box clearfix">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <p>哈哈哈哈哈</p>
</body>

</html>

  • 解决被浮动元素覆盖问题（两栏自适应布局）:

    浮动元素会覆盖标准文档流的兄弟元素，可以触发被遮挡元素的BFC来解决

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .father {
      width: 100px;
      height: 50px;
      background-color: red;
      float: left;
    }

    .child {
      /*设置BFC*/
      overflow: hidden;
      width: 600px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="father">
    aaa
  </div>
  <div class="child">
    bbb
  </div>

</body>

</html>

  • 结局外边距margin高度塌陷问题（高度重合）

    标准文档流中块级元素垂直方向的margin外边距不会相加而是以较大的为准，这就是margin塌陷，可以通过触发BFC来解决

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .father {
      overflow: hidden;
      background-color: #424242;
    }

    .box2 {
      width: 50px;
      height: 50px;
      margin-bottom: 30px;
      /* overflow: hidden; */
    }

    .box3 {
      margin-top: 40px;
      background-color: green;
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="box2">box2</div>
  </div>
  <div class="box3"></div>
</body>

</html>

.clearfix清除浮动

以上面提到的几种方式触发BFC闭合浮动有时会出现意外的效果，现在可以用:before、:after伪元素进行清除浮动，只需要在父元素上添加以下CSS样式即可

.clearfix::before, .clearfix::after {
      content: " ";/* 空格 兼容Opera浏览器 */
      display: table;
    }

.clearfix::after {
      clear: both;
    }

.clearfix {
      /* 兼容IE 6/7 */
      zoom: 1;
    }

评论

× 目录