Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 布局中的BFC作用和Flex容器
Blogger Information
Blog 21
fans 0
comment 0
visits 14769
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
布局中的BFC作用和Flex容器
Yuming
Original
580 people have browsed it

布局中的BFC作用和Flex容器

BFC的三个作用

1.解决外边距合并

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="x.css" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="box"></div>
  12.       <div class="box"></div>
  13.     </div>
  14.   </body>
  15. </html>
  1. .container {
  2.     .box {
  3.         width: 10em;
  4.         height: 10em;
  5.         margin: 1em;
  6.         background-color: blue;
  7.         border-radius: 1em;
  8.     }
  9. }

  • 外边距相邻两元素触发BFC可以在外部分别用BFC元素包裹，触发后的元素形成独立的空间，不被外部影响。 如下
  1. <div class="container">
  2.       <div class="out-box">
  3.         <div class="box"></div>
  4.       </div>
  5.       <div class="out-box">
  6.         <div class="box"></div>
  7.       </div>
  8.     </div>
  1. .container {
  2.   .out-box {
  3.     overflow: hidden;
  4.     .box {
  5.       width: 10em;
  6.       height: 10em;
  7.       margin: 1em;
  8.       background-color: blue;
  9.       border-radius: 1em;
  10.     }
  11.   }
  12. }

2.清除浮动

  1. <div class="container">
  2.     <div class="box"></div>
  3. </div>
  1. .container {
  2.   border: 1px solid red;
  3.   .box {
  4.     float: left;
  5.     width: 10em;
  6.     height: 10em;
  7.     background-color: blue;
  8.     border-radius: 1em;
  9.   }
  10. }

  • 子元素浮动，脱离文档标准流，通过父容器触发BFC清除浮动，计算子元素的高度 如下
    1. .container {
    2.   border: 1px solid red;
    3.   overflow: hidden;
    4.   .box {
    5.     float: left;
    6.     width: 10em;
    7.     height: 10em;
    8.     background-color: blue;
    9.     border-radius: 1em;
    10. }
    11. }

3.阻止元素被浮动元素覆盖

  1. <div class="container">
  2.    <div class="box"></div>
  3.    <div class="box"></div>
  4. </div>
  1. .container {
  2.   .box:nth-child(1) {
  3.     float: left;
  4.     width: 5em;
  5.     height: 5em;
  6.     background-color: red;
  7.   }
  8.   .box:nth-child(2) {
  9.     width: 10em;
  10.     height: 10em;
  11.     background-color: blue;
  12.   }
  13. }

  • 兄弟元素浮动，脱离文档标准流，通过兄弟元素触发BFC达到阻止元素被浮动元素覆盖的目的
    1. .container {
    2.   .box:nth-child(1) {
    3.     float: left;
    4.     width: 5em;
    5.     height: 5em;
    6.     background-color: red;
    7. }
    8.   .box:nth-child(2) {
    9.     overflow: hidden;
    10.     width: 10em;
    11.     height: 10em;
    12.     background-color: blue;
    13.   }
    14. }

flex容器常用的四个属性

justify-content: center;<br/>
align-items: center;<br/>
align-content: center;<br/>
flex-flow: row;

  1.  <div class="container">
  2.     <div class="box"></div>
  3.     <div class="box"></div>
  4.     <div class="box"></div>
  5.     <div class="box"></div>
  6.     <div class="box"></div>
  7.     <div class="box"></div>
  8. </div>
  1. .container {
  2.       height: 100vh;
  3.       display: flex;
  4.       justify-content: center;
  5.       align-items: center;
  6.       flex-flow: row wrap;
  7.       align-content: space-between;
  8.       .box {
  9.         width: 10em;
  10.         height: 10em;
  11.         background-color: blue;
  12.         margin: 1em;
  13.   }
  14. }

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：后面一个案例, 想说明什么呢, 不清楚
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post