简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Float Definition and Float Clearance (BFC)

Float Definition and Float Clearance (BFC)

零下一度
零下一度Original
2017-05-10 11:57:301631browse

Float

1. What is float

When the element's <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> attribute is not none float occurs. 

<p class="float">float</p>
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

2. The impact of floating

  1. Floating will cause elements to break away from the document flow. The specific performance is:

  • The parent element is highly collapsed, that is, it will not contain floating elements.
    For example, the above code will appear as

    Float Definition and Float Clearance (BFC)

    The height of the parent element is collapsed

  • The text is wrapped.

    Float Definition and Float Clearance (BFC)

    Text wrapping effect


    You can notice that the width of the .normal element here covers .float element, but there is no text under the .float element, which means that the text is "squeezed" out. This is because although it will break away from the document flow, it will not Break away from the text flow. This effect is also the original intention of the float attribute. The code is as follows: 

    
  <p class="float">float</p>
  
    正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素
    

    body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.normal {
  background-color: #fff;
}

  • The margins of floating elements will not be merged.
    For related content about margin merging, you can click here. Once the

  • element is floated, it will become an inline block element, that is, <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block.

    • 3. Floating application

    • The text wrapping mentioned above.

    • Write a three-column layout with fixed width on the left and right and adaptive middle. 

      <body>
  <p class="left float">left</p>
  <p class="right float">right</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
</body>
      body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.left {
  float: left;
}
.right {
  float: right;
}
.mid {
  height: 100px;
  background-color: #fff;
  margin: 200px; /*故意加上了上下 margin 值*/
}

      Here I deliberately added the margin value, you can see the effect:

      Float Definition and Float Clearance (BFC)

      Three column layout

      body also falls down along with the margin of .mid. This can be explained by the merging of margins introduced earlier.

      ps: When I first wrote this three-column layout, the html was written like this 

      <body>
  <p class="left float">left</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
  <p class="right float">right</p>
</body>

      As above, write the middle adaptive element in the middle. In fact, this is more logical. But if you write it like this, it won't work. The elements on the right will fall down, because the .mid element is a block-level element and will occupy the entire line. .left will not fall down. Because it is originally a floating element separated from the document flow.

    Clear floats

    Clear on child elements

    Here I only write methods that do not produce meaningless tags.

    • If there is a sibling element behind the floating element, you can add the clear attribute to its sibling element.
      If the text surrounds that part of the code, add clear:left or clear:both to .normal. The specific usage of clear will not be elaborated here.

    • Add a pseudo class or pseudo element to the element to be cleared of floating. 

      .float::after {
  content: &#39;&#39;;
  display: block;
  visiability: hidden;
  height: 0;
  clear: both;
}

      For information on the use of ::after, please see the MDN documentation.

    Clear on the parent element, that is, BFC

    BFC (Block Formatting Context), that is, block-level formatting context, its official explanation is:

    Floating, absolutely positioned elements (position is absolute or fixed), inline block elements display:inline-block, Table cell display:table-cell, table title display:table-caption and overflow elements whose attribute value is not visible ( A new block-level formatting context will be created except when the value is propagated to viewportviewport).

    In summary, it must meet one of the following conditions:

    1. float is not none

    2. position is not static or relative

    3. ##display is table-cell, table-caption, inline-block, flex, inline-flex

    4. overflow If not visible

    just add any of the above to the parent element The attribute meets the conditions, that is, adding BFC to the parent element can clear the floating of the child element.

    【Related recommendations】

    1.

    Free css online video tutorial

    2.

    css online manual

    3.

    php.cn Dugu Jiujian (2)-css video tutorial

    The above is the detailed content of Float Definition and Float Clearance (BFC). For more information, please follow other related articles on the PHP Chinese website!

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：The css attribute that must be mastered--lineheightNext article：The css attribute that must be mastered--lineheight

    Related articles

    See more