About CSS floating and canceling floating

Definition of Float

Sets the element out of the normal document flow, moving the element closer to the left or right. The edge of the parent element, or the edge of other elements set to float

Problems Floating Solve

1. Solve the problem of text surrounding pictures
2. Solve the spacing problem
3. You can layout to the left or right

Place the text to the left of the image

When not using float:

insert image description here

When using float:

insert image description here

Used attributes

Attribute used: float, attribute value: right/left

Floating height collapse problem and solution Height collapse problem

When the height set for the parent element is different from the height set for the child element, a height collapse problem will occur. When inserting some text, it cannot be inserted in the correct position and the height collapse causes the title to not appear below this block:

insert image description here

After solving:

insert image description here

Workaround

Pseudo-element clear float:
Set a pseudo element after the parent element to clear the float:
1. Set display according to the parent tag
2. Set clear:both again
Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .parent{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            display: block;
            background: lightgray;
        }
        .parent:after{
            content: "";
            display: block;
            clear: both;
        }
        .child{
            display: inline-block;
            width: 200px;
            height: 200px;
            background: lightblue;
            float: left;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<h1>This is a heading</h1>
<div></div>
</body>
</html>

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

<<: Implementation of HTML to PDF screenshot saving function

>>: One minute to experience the smoothness of html+vue+element-ui

MySQL controls the number of attempts to enter incorrect passwords

About CSS floating and canceling floating

Definition of Float

Problems Floating Solve

Place the text to the left of the image

MySQL controls the number of attempts to enter incorrect passwords

Detailed process of upgrading gcc (version 10.2.0) under CentOS7 environment

Detailed explanation of the use of IF(), IFNULL(), NULLIF(), and ISNULL() functions in MySQL

Detailed tutorial on installing Tomcat server and configuring environment variables on Win10 (picture and text)

Implementation of crawler Scrapy image created by dockerfile based on alpine

How to find the specified content of a large file in Linux

Detailed explanation of Docker common commands Study03

How to implement responsive layout in vue-cli

Docker image creation Dockerfile and commit operations

MySQL 8.0.18 stable version released! Hash Join is here as expected

Recommend

JavaScript to implement the web version of the snake game

Detailed explanation of the whole process of building a personal blog with nginx+WordPress

jQuery implements the function of adding and deleting employee information

MySQL implements an example method of logging in without a password

Detailed explanation of the underlying encapsulation of Java connection to MySQL

Solve the MySQL 5.7.9 version sql_mode=only_full_group_by problem

Detailed installation history of Ubuntu 20.04 LTS

Summary of 3 ways to lazy load vue-router

Vue based on Element button permission implementation solution

MySQL query method with multiple conditions

Detailed explanation of Angular component projection

How to install and modify the initial password of mysql5.7.18 under Centos7.3

Automatic line breaks in html pre tags

Understand all aspects of HTTP Headers with pictures and text

The difference and usage of Vue2 and Vue3 brother component communication bus