What are the methods to clear floats?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What are the methods to clear floats?

清浅

Dec 13, 2018 pm 03:21 PM

float

The methods for clearing floats include clearboth, setting clearfix, overflow and setting double pseudo-elements to the parent element

When we write code, sometimes Because of the use of float elements, some elements on the page cannot be displayed correctly. In the following article, we will introduce several methods of clearing floats in detail. It has certain reference value and I hope it will be helpful to everyone.

【Recommended course: CSS course】

##Floating Consequences:

(1) Since the floating element is out of the document flow, the height of the parent element cannot be expanded, affecting elements at the same level as the parent element

(2) and Non-floated elements at the same level of the floating element will follow it, because the floating element leaves the document flow and does not occupy its original position
(3) If the floating element is not the first floating element, the elements before it also need to be floated , otherwise it will easily affect the structural display of the page

Example: Set three divs in one div, and let the three divs expand the parent element

<style>
    .box{border:1px solid #ccc;background:pink;}
    .red{width:100px;height:100px;background: red;}
    .green{width:100px;height:100px;background:green;}
    .blue{width:100px;height:100px;background: blue;}
</style>
<body>
<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

Rendering:

What are the methods to clear floats?

After adding float:left, the parent element cannot be opened

What are the methods to clear floats?

How to clear the float

(1) Use clear:both to clear floats

Put an empty div tag in the code, and then set clear:both to this tag to clear floats impact on the page. Its advantages are simplicity, convenience and good compatibility, but it is generally not recommended to use this method because it will cause structural confusion and is not conducive to later maintenance

<div style="clear: both"></div>

(2) Use pseudo-element clearfix to clear Float

Adds an :after pseudo-element to the parent element. By clearing the float of the pseudo-element, it achieves the purpose of supporting the height of the parent element

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

(3) Use of overflow method

When the overflow style is set to the parent element, whether it is overflow:hidden or overflow:auto, the float can be cleared as long as its value is not visible. Its essence is Constructed a BFC, which achieves the effect of supporting the height of the parent element

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(4) Use of double pseudo-element method

By giving the parent element Set up double pseudo elements to achieve the effect of clearing floats

 .clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}

Summary: The above is the entire content of this article. I hope that through this article, everyone can understand the method of clearing floats

The above is the detailed content of What are the methods to clear floats?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

float最大值为多少Oct 11, 2023 pm 05:54 PM

float最大值：1、在C语言中，float最大值是3.40282347e+38，根据IEEE 754标准，float类型的最大指数为127，尾数的位数为23，通过这种方式，最大浮点数为3.40282347e+38；2、在Java语言中，float最大值是3.4028235E+38；3、在Python语言中，float最大值是1.7976931348623157e+308。

数据库float长度有哪些Oct 10, 2023 pm 03:57 PM

常见的数据库float长度有：1、MySQL中的float类型长度，可以是4个字节或8个字节；2、Oracle中的float类型长度，可以是4个字节或8个字节；3、SQL Server中的float类型长度，固定为8个字节；4、PostgreSQL中的float类型长度，可以是4个字节或8个字节等等。

float精度能到多少Oct 17, 2023 pm 03:13 PM

float精度能到6到9位小数。根据IEEE754标准，float类型可以表示的有效数字位数为大约6到9位。需要注意的是，这只是理论上的最大精度，实际使用中由于浮点数的舍入误差，float类型的精度往往会更低。在计算机中进行浮点数运算时，由于浮点数的精度限制，可能会出现精度损失的情况。为了提高浮点数的精度，可以使用更高精度的数据类型，如double或者long double。

c语言中float什么意思Oct 12, 2023 pm 02:30 PM

C语言中的float是一种数据类型，用于表示单精度浮点数，浮点数是一种用科学计数法表示的实数，可以表示非常大或非常小的数值。float类型的变量可以存储小数点后6位有效数字的数值，在C语言中，使用float类型可以进行浮点数的运算和存储，其变量可以用于表示小数、分数、科学计数法等需要精确表示的实数，与整数类型不同，浮点数可以表示小数点后的数字，并且可以进行小数的四则运算。

如何将string转换成floatOct 16, 2023 pm 02:03 PM

可以通过Python、JavaScript、Java、C#、Ruby和PHPstring转换成float。详细介绍：1、Python，输入float_number = float(string_number)；2、JavaScript，输入float_number = parseFloat(string_number);；3、Java等等。

float属性取值有哪些Oct 10, 2023 pm 02:03 PM

float属性取值有left、right、none、inherit、clearinline-start和inline-end。详细介绍：1、left，元素向左浮动，即元素会尽可能地靠近容器的左边，其他元素会围绕在其右侧；2、right，元素向右浮动，即元素会尽可能地靠近容器的右边，其他元素会围绕在其左侧；3、none默认值，元素不浮动，会按照正常的文档流排列等等。

float和double有什么区别Oct 11, 2023 pm 05:38 PM

float和double区别主要在于精度、存储和计算速度、范围以及在编程语言中的使用。详细介绍：1、精度不同，Float是单精度浮点数，占用4个字节（32位），而double是双精度浮点数，占用8个字节（64位）；2、存储和计算速度不同，double占用的空间更大，需要更多的存储空间来存储数值，在需要高性能和速度的应用程序中，使用float类型可能会更加高效；3、范围不同等等。

float32字节包括哪些Oct 10, 2023 pm 04:07 PM

float32字节包括符号位、指数位和尾数位，用于表示32位浮点数。详细介绍：1、符号位（1位），用来表示数字的正负，0表示正数，1表示负数；2、指数位（8位），用来表示浮点数的指数部分，通过指数位，可以调整浮点数的大小范围；3、尾数位（23位），用来表示浮点数的尾数部分，尾数位存储了浮点数的小数部分。符号位决定了浮点数的正负，指数位和尾数位共同决定了浮点数的大小和精度。

See all articles