Summary of Css methods for clearing floats

Float is often used in web page layout, but the floating block-level elements are out of the standard document flow, which makes the parent element of the floating element have no height, resulting in the parent element having no height, so it is necessary to clear the impact of float on the parent element. This article introduces several methods to clear float.

Several ways to clear the floating effect: Set the height of the parent element

Effect picture:

Code:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        height: 30px;
        line-height: 30px;
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding-right: 20px;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Questions and Answers</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

External wall method: Use a blank block-level element to add the CSS style clear to clear the float

Note: Block-level elements with the clear style cannot have margin attributes added

Effect picture:

Code:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        /* background-color: #333; */
    }
    .header a {
        /* color: #fff; */
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }

    .clearfix {
        height: 10px;
        background-color: red;
        clear: both;
    }

    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Questions and Answers</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">About</a></li>
    </ul>
    
</div>

<div class="clearfix"></div>
    
<div class="main">Main content</div>

Inner wall method: Use a blank block-level element to add the CSS style clear to clear the float

Effect picture:

Code:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }
    .clearfix {
        clear: both;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Questions and Answers</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">About</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

The interior wall method has relative advantages over the exterior wall method:

After the inner wall method is set, the parent element of the floating element will be stretched, that is, the height

Add overflow:hidden to the parent element of the floating element

Original meaning: Remove hidden content, and hide all content that overflows the border.

Effect picture:

Code:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
        overflow: hidden;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }

    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Questions and Answers</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>
    
<div class="main">Main content</div>

Summarize

The above is a summary of the Css methods for clearing floating introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Summary of React's way of creating components

>>: How to view the IP address of Linux in VMware virtual machine