search
HomeWeb Front-endCSS TutorialWhat does css float mean? The principle of css floating and the method of css clearing floating (with code)

What does css float mean? The so-called CSS floating means that the floating element will break away from the normal flow of the document and move left or right according to the value of float until its outer boundary touches the inner boundary of the parent element or the outer boundary of another floating element. until. Because the floated box is not in the document's normal flow, block-level elements in the document's normal flow behave as if the floated element does not exist. Next, this article will tell you about the principle of CSS floating and the method of clearing floating in CSS.

Floating effect

Floating elements will cause the parent element to collapse

When float is set to an element, the element leaves the document flow and the parent element does not set height. , causing collapse.

<div>
    <div></div>
</div>
.super{
    border:1px solid red;
}

.sub{
  float: left;
  background: green;
  border: 1px solid yellow;
  width: 100px;
  height: 100px;
}

What does css float mean? The principle of css floating and the method of css clearing floating (with code)

The left (right) outer boundary of a floating element cannot exceed the left (right) inner boundary of its parent element.

When the margin is not set to a negative value and the parent element still has remaining space, the outer boundary (margin) of the floating element will not exceed the inner boundary (padding) of the parent element.

<div>
    <div></div>
    <div></div>
</div> 
.super{
    margin: 0 auto;
    padding: 10px;
    border:1px solid yellow;
     width: 300px;
}

.super:after{
  clear: both;
  content: '';
  display: block;
}

.sub1{
  float: left;
  background: pink;
  border: 1px solid green;
  width: 100px;
  height: 100px;
}

.sub2{
  float: right;
  background: pink;
  border: 1px solid green;
  width: 100px;
  height: 100px;
}

What does css float mean? The principle of css floating and the method of css clearing floating (with code)

Floated elements will not overlap.

This is also applicable under the condition that margin will not be negative and the parent element has remaining space.
This is my understanding of Rules 2 and 3 in the Floating chapter of the "CSS Definitive Guide". The following is the original text.

2. The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left-floating (or right-floating) element that occurs earlier in the document’s source, unless the top of the later element is below the bottom of the former.

Youdao Translation:

2. The left (or right) outer edge of the floating element must be located on the right (left) of the right (left) floating (or right) The right outer edge of a left-floating element that appears earlier in the document's source code, unless the top of a later element is below element may not be to the right of the left outer edge of any right-floating element to its right. The left outer edge of a right- floating element may not be to the left of the right outer edge of any left-floating element to its left.

Youdao Translation:

3. The right outer edge of the left-floating element may not be to the right of the left outer edge of the right-floating element. The left outer edge of a right-floated element may not be to the left of the right outer edge of any left-floated element to the left.

These two rules are the basis for ensuring that two floating elements do not overlap.

The performance is that when a floating element moves to the left (right), there is already a floating element to the left (right) of the element. They will not overlap, and the later ones are arranged next to the first ones. If the total width of the floating elements exceeds the width of the parent element, the floating elements will not overlap. According to the order of the

HTML

structure, floating elements that cannot be arranged on one line will be moved to the next line. <pre class='brush:php;toolbar:false;'>&lt;div class=&quot;super super1&quot;&gt; &lt;div class=&quot;sub1&quot;&gt;&lt;/div&gt;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 &lt;div class=&quot;sub2&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;super super2&quot;&gt; &lt;div class=&quot;sub1&quot;&gt;float:left&lt;/div&gt; &lt;div class=&quot;sub2&quot;&gt;float:right&lt;/div&gt; &lt;/div&gt; .super { float: left; margin: 10px; padding: 10px; border: 1px solid blue; width: 300px; } .super1 .sub1{ float: left; background: pink; border: 1px solid red; width: 100px; height: 100px; } .super1 .sub2{ float: left; background: pink; border: 1px solid red; width: 100px; height: 100px; } .super2 .sub1{ float: left; background: pink; border: 1px solid red; width: 200px; height: 100px; } .super2 .sub2{ float: right; background: pink; border: 1px solid red; width: 200px; height: 100px; }</pre>The effect is as follows:


What does css float mean? The principle of css floating and the method of css clearing floating (with code)The top of a floating element cannot be higher than the inner top of its parent element. Higher than the top of the previously floated element.

This rule is also true when margin-top is not negative.

The top of the parent element will limit the floating element to prevent it from floating to the top of the page.

For the example on the right side of the picture below, sub2 is below sub1. The space on the right side of sub1 is not enough to accommodate sub2, but it is enough to accommodate sub3. However, sub3 does not float up. That is because its top cannot exceed the top of sub2. This The example is enough to prove that the top of the floating element cannot be higher than the top of the floating element that appeared before.

<div class="super">
    <div class="sub sub0"></div>
</div>

<div class="super">
    <div class="sub sub1">sub1</div>
    <div class="sub sub2">sub2</div>
    <div class="sub sub3">sub3</div>
</div>
.super {
    float: left;
    margin: 10px;
    padding: 10px;
    border: 1px solid blue;
    width: 320px;
}

.sub {
    background: pink;
    border: 1px solid red;
    height: 100px;
}

.sub0 {
    float: left;
    width: 100px;
}

.sub1 {
    float: left;
    width: 200px;
}

.sub2 {
    float: left;
    width: 150px;
}

.sub3{
    float: right;
    width: 50px;
}

The effect is as follows:


What does css float mean? The principle of css floating and the method of css clearing floating (with code)##Clear float

Clear float The purpose is to solve the problem of height collapse and expand the floating parent element. There are several commonly used methods:

Add an empty tag with the style clear:both

<p></p>
<p></p>
Put the above tag to the parent element of the floating element at last.

Principle: clear will add a clearing area (clearance) above the margin-top of the element. This area will add extra space to the margin-top of the element and will not allow floating elements to enter this area. area.

Advantages: Convenience and strong compatibility.

Disadvantages: There are many meaningless tags, which increases maintenance costs, and if you are not careful, there will be a blank height if there is an extra space in the middle. <p></p>

The parent element is set to float

Advantages: simple, less code, and good browser support. Disadvantages: After the parent uses float, the impact of floating still exists, and it is impossible for the parent to use float all the way up.


Use overflow and zoom attributes

<p></p>
.fix{
    overflow:hidden(auto、scroll); 
    zoom:1;
}

优点:代码简洁,兼容性好,不产生多余标签。

缺点:设置该fix类的标签的内容超出该标签的时候会被隐藏(或产生滚动条)。

父元素设置浮动

优点:简单,代码少,浏览器支持好。
缺点:父级使用浮动之后,浮动造成的影响仍旧存在,并且不可能父级往上一级级都使用浮动。

父元素设置position

原理:在position的值不为relativestatic的情况下,会形成BFC。

这种方式在父元素原本就需要设置positionfixed或者absolute的时候可以优先采用。

优点:简单,代码少,浏览器支持好。
缺点:改变父元素布局,影响整体布局。

使用:after

.fix:after{
    display:block; 
    content:''; 
    clear:both; 
}

原理类似添加新的标签然后设置clear:both;,但使用伪类的方法没有多余标签。

优点:代码简洁,兼容性好,不产生多余标签。

以上方法中,第一种增加一个样式为clear:both的空标签的方法不建议使用,会增加无意义标签,其他设置父元素浮动,改变父元素position、overflow的方法依情况而定,如果父元素本身就有这方面的样式需求,那很合适,如果没有的话还是采用最后一种伪元素的:after的方式最为常见。

相关文章推荐:

CSS清除浮动_清除float浮动_html/css_WEB-ITnose

Css3之基础-8 Css 浮动(定位,浮动定位)_html/css_WEB-ITnose

CSS中Float(浮动)相关技巧文章_经验交流

CSS里怎么清除浮动

The above is the detailed content of What does css float mean? The principle of css floating and the method of css clearing floating (with code). 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
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Atom editor mac version download

Atom editor mac version download

The most popular open source editor