CSS method of clearing float and BFC

CSS method of clearing float and BFC

BFC

BFC: Block Formatting Context

BFC layout rules

  • The inner boxes will be placed one after another in the vertical direction.
  • The vertical distance of the Box is determined by margin. The margins of two adjacent Boxes belonging to the same BFC will overlap.
  • When calculating the height of the BFC, floating elements are also included in the calculation.
  • The BFC area will not overlap with the float box.
  • The left edge of the margin box of each box (block and line boxes) touches the left edge of the containing block's border box (for left-to-right formatting, and vice versa). This is true even if there are floats.
  • BFC is an isolated independent container on the page. The child elements inside the container will not affect the elements outside. The same is true in reverse.

How to create a Block Formatting Context

1. The value of float is not none.

2. The value of position is not static or relative.

3. The value of display is inline-block , table-cell , flex , table-caption or inline-flex
4. The value of overflow is not visible

The role of BFC

1. Use BFC to avoid margin overlap.

2. Adaptive two-column layout

3. Clear floats.

Clear Float

Clearing floats is mainly to solve the problem that the internal height of the parent element is 0 due to the floating of child elements.

Method to clear floats

1. Additional labeling method

After the last floating label, add a new label and set it to clear: both; (not recommended)

Advantages: easy to understand, convenient

Disadvantages: Adding meaningless tags, poor semantics

<style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clear"></div>
</div>
<div class="div2"></div>
</body>

2. Add overflow attribute to the parent

Clear floating by triggering BFC. (Not recommended)

Advantages: concise code

Disadvantages: When the content increases, it is easy to cause the content to be hidden due to the failure of automatic line wrapping, and the overflowing elements cannot be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
            overflow: hidden;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

3. Use the after pseudo element to clear the float (recommended)

Advantages: Conforms to the closed floating concept and has a correct structural semantics.

Disadvantages: ie6-7 does not support pseudo-elements: after, use zoom: 1 to trigger hasLayout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
        .clearfix:after {
            content: ""; /*The content is empty*/
            display: block; /*Convert to block-level element*/
            height: 0; /*Height is 0*/
            clear: both; /*clear float*/
            visibility: hidden; /*Hide the box*/
        }
        .clearfix {
            *zoom: 1; /*IE6\7 processing method*/
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

4. Use before and after double pseudo elements to clear floats

Advantages: Not only can it clear floating, but it can also solve the problem of height collapse (add the class name clearfix to the parent box)

Disadvantage: Use zoom:1 to trigger hasLayout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
        .clearfix:after, .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

Summarize

This is the end of this article about CSS clear float and BFC. For more relevant CSS float BFC content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Press Enter to automatically submit the form. Unexpected discovery

>>:  Do you know how to use mock in vue project?

Recommend

MySQL scheduled full database backup

Table of contents 1. MySQL data backup 1.1, mysql...

js array entries() Get iteration method

Table of contents 1. Detailed syntax of entires()...

How to install mysql8.0.23 under win10 and solve the problem of "the service does not respond to the control function"

Install mysql under win10 1. Download MySQL from ...

Detailed explanation of modifying the default style of external component Vant based on Vue cli development

Table of contents Preface 1. Less 2. Import your ...

How to build a tomcat image based on Dockerfile

Dockerfile is a file used to build a docker image...

Common causes and solutions for slow MySQL SQL statements

1. Slow query due to lack of index or invalid ind...

WeChat applet scroll-view realizes left and right linkage

This article shares the specific code for WeChat ...

CSS3 realizes the website product display effect diagram

This article introduces the effect of website pro...

CocosCreator general framework design resource management

Table of contents Problems with resource manageme...

How to customize more beautiful link prompt effect with CSS

Suggestion: Handwriting code as much as possible c...

CSS3 transition rotation perspective 2d3d animation and other effects example code

Table of contents CSS3 Box Model a. CSS3 filter b...

MySQL 5.7.17 installation and configuration tutorial under CentOS6.9

CentOS6.9 installs Mysql5.7 for your reference, t...

Vue implements drag progress bar

This article example shares the specific code of ...

How MySQL Select Statement is Executed

How is the MySQL Select statement executed? I rec...

This article helps you understand PReact10.5.13 source code

Table of contents render.js part create-context.j...