Detailed explanation of the problems and solutions caused by floating elements

1. Problem

Multiple floating elements cannot expand the width of the parent element, and the height of the parent element may become 0.
If a floated element is followed by a non-floated element, the non-floated element will float immediately after it.
If there are elements of the same level in front of the floating element that are not floating, it will affect the page structure.

2. Solution

1. clear: both

Add an element with the attribute clear:both; after the last floated element.

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear{
    clear: both;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
    <div class="clear">5</div>
</div>

Add the :after pseudo-element with the clear:both; attribute to the parent element.

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear:after{
    content: '';
    display: block;
    clear: both;
}
</style>
<div class="parent clear">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

Note: Pseudo-elements are inline by default, so when using pseudo-elements, you must set the attribute display: block;.

2. overflow:auto / overflow:hidden

<style>
div.parent{
    overflow:auto;
    /*overflow: hidden; also works*/
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

3. Floating parent elements

<style>
div.parent{
    float: left;
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

Note: This method is generally not used, as it will cause layout problems for the parent element.

This concludes this article on the problems and solutions caused by floating elements. For more information about problems caused by floating elements, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!

<<: Three BOM objects in JavaScript

>>: VMware Workstation virtual machine installation operation method