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

Summary of several commonly used string methods in JavaScript (must-read for beginners)

Several commonly used string methods in JavaScrip...

Detailed explanation of the use of Vue mixin

Table of contents Use of Vue mixin Data access in...

Function overloading in TypeScript

Table of contents 1. Function signature 2. Functi...

A brief discussion on MySQL index design principles and the differences between common indexes

Index definition: It is a separate database struc...

Markup language - simplified tags

Click here to return to the 123WORDPRESS.COM HTML ...

Several ways to improve the readability of web pages

1. Use contrasting colours. The contrast here ref...

Simple analysis of EffectList in React

Table of contents EffectList Collection EffectLis...

A brief introduction to VUE uni-app core knowledge

Table of contents specification a. The page file ...

CSS to achieve the sticky effect of two balls intersecting sample code

This is an effect created purely using CSS. To pu...

Five ways to traverse JavaScript arrays

Table of contents 1. for loop: basic and simple 2...

How to use CSS custom variables in Vue

Table of contents The CSS custom variable functio...

Detailed explanation of CSS text decoration text-decoration &amp; text-emphasis

In CSS, text is one of the most common things we ...

Java+Tomcat environment deployment and installation process diagram

Next, I will install Java+Tomcat on Centos7. Ther...

Detailed explanation of the wonderful CSS attribute MASK

This article will introduce a very interesting at...

Analyze the difference between querySelector and getElementById methods in JavaScript

Table of contents 1. Overview 1.1 Usage of queryS...