Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示BFC的三个作用
Blogger Information
Blog 21
fans 0
comment 0
visits 21419
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的三个作用
N.
Original
660 people have browsed it

BFC的三个作用

1.能够包含“浮动元素”，也可以说是清除浮动效果，
2.解决垂直方向上的外边距折叠问题
3.BFC能避免与外部的浮动元素重叠

1.实例演示包含浮动元素

  1.  <style>
  2.       .box {
  3.         border: 3px solid #000;
  4.       }
  5.       .box > .box1 {
  6.         width: 5em;
  7.         height: 5em;
  8.         border: 1px solid #000;
  9.         background-color: cornflowerblue;
  10.         float: left;
  11.       }
  12.     </style>
  1.   <body>
  2.     <div class="box">
  3.       <div class="box1"></div>
  4.       <div class="box2"></div>
  5.     </div>
  6.   </body>

浮动后效果图：

添加BFC后的css代码

  1. <style>
  2.       .box {
  3.         border: 3px solid #000;
  4.         overflow: hidden;
  5.       }
  6.       .box > .box1 {
  7.         width: 5em;
  8.         height: 5em;
  9.         border: 1px solid #000;
  10.         background-color: cornflowerblue;
  11.         float: left;
  12.       }
  13.     </style>

添加BFC后浮动元素被包含后的效果图

2.解决元素垂直方向上外边距重叠的问题

html代码如下：

  1.   <body>
  2.     <div class="box2"><div class="box1"></div></div>
  3.     <div class="box2"><div class="box3"></div></div>
  4.   </body>

css代码如下：

  1. box1 {
  2.         width: 5em;
  3.         height: 5em;
  4.         border: 1px solid #000;
  5.         background-color: cornflowerblue;
  6.         margin-bottom: 3em;
  7.       }
  8.       .box3 {
  9.         width: 5em;
  10.         height: 5em;
  11.         border: 1px solid #000;
  12.         background-color: crimson;
  13.         margin-top: 3em;
  14.       }

效果图：

添加BFC后的css代码

  1.  .box1 {
  2.         width: 5em;
  3.         height: 5em;
  4.         border: 1px solid #000;
  5.         background-color: cornflowerblue;
  6.         margin-bottom: 3em;
  7.       }
  8.       .box3 {
  9.         width: 5em;
  10.         height: 5em;
  11.         border: 1px solid #000;
  12.         background-color: crimson;
  13.         margin-top: 3em;
  14.       }
  15.       .box2 {
  16.         overflow: hidden;
  17.       }

效果图

3.实例演示BFC能避免与外部的浮动元素重叠

上代码

  1.    .box .box1:nth-child(1) {
  2.         width: 4em;
  3.         height: 4em;
  4.         border: 1px solid #000;
  5.         background-color: darkred;
  6.         float: left;
  7.       }
  8.       .box1:last-child {
  9.         width: 16em;
  10.         height: 16em;
  11.         background-color: darkmagenta;
  12.       }
  13.   <body>
  14.     <div class="box">
  15.       <div class="box1"></div>
  16.       <div class="box1"></div>
  17.     </div>

效果图

添加过BFC的css代码如下：

  1.  .box .box1:nth-child(1) {
  2.         width: 4em;
  3.         height: 4em;
  4.         border: 1px solid #000;
  5.         background-color: darkred;
  6.         float: left;
  7.       }
  8.       .box1:last-child {
  9.         width: 16em;
  10.         height: 16em;
  11.         background-color: darkmagenta;
  12.         overflow: hidden;
  13.       }

效果图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：BFC的功能远不止这三个, 更多功能查阅MDN
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