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

The process of SSH service based on key authentication in Linux system

About CSS floating and canceling floating

Definition of Float

Problems Floating Solve

Place the text to the left of the image

The process of SSH service based on key authentication in Linux system

The principle and implementation of js drag effect

Optimization methods when Mysql occupies too high CPU (must read)

The idea and process of Vue to realize the function of remembering account and password

Install Memcached and PHP Memcached extension under CentOS

Perfect solution to Docker Alpine image time zone problem

A simple method to merge and remove duplicate MySQL tables

Tips for Mixing OR and AND in SQL Statements

Detailed explanation of the writing order and execution order of Mysql series SQL query statements

Detailed explanation of how to use relative paths in HTML to obtain files at all levels of directories

Recommend

IIS7~IIS8.5 delete or modify the server protocol header Server

How to set font color in HTML and how to get accurate font color in HTML using PS

Organize the common knowledge points of CocosCreator

Detailed explanation of Nginx process scheduling problem

How to configure two or more sites using Apache Web server

Summarize the common application problems of XHTML code

Docker stop stops/remove deletes all containers

WeChat applet implements video player sending bullet screen

Example of how to set up a Linux system to automatically run a script at startup

Detailed explanation of common for loop in JavaScript statements

Detailed explanation of Vue filters

Solution to the initialization error when installing mysql5.7 from rpm package in centos6.5

Let's talk about Vue's mixin and inheritance in detail

How to install Chrome browser on CentOS 7

Fabric.js implements DIY postcard function