Float Definition and Float Clearance (BFC)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Float Definition and Float Clearance (BFC)

零下一度

May 10, 2017 am 11:57 AM

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

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

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:

float is not none
position is not static or relative
##display is table-cell, table-caption, inline-block, flex, inline-flex
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】

Free css online video tutorial

css online manual

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

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software