CSS-float float_html/css_WEB-ITnose

Float is a powerful attribute, but it will also trouble us if we don’t know how it works. This article mainly introduces the principle and basic usage of float.

We can see Let’s go to the application of float in the printing world - magazines. Many magazine articles have an image on the left, and the text on the right floats around the image on the left. In the world of HTML/CSS, there are floating-style images, and the text will be wrapped around it. Around, just like the layout of a magazine. Pictures are just one of the many applications of the floating attribute. We can also use floating to achieve a two-column (multi-column) layout. In fact, we can use floating (block elements) on any HTML element ).

Definition of float

Definition from W3C:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

To put it simply, the element that is set to float will float to the corresponding left or right, and the content will be filled to the corresponding floating element. Place.

Floating has four attribute values: left|right|inherit|none, which are left floating, right floating, inheritance (floating attribute value from parent element) and none.

Let’s take an example of magazine effect:

Magazine effect floating

The style of the picture is:

img {     float: right;    margin: 10px;}

Performance of floating

HTML has a rule: normal document flow. Under normal document flow, each block element (div, p, h1...) will wrap. And floating elements will wrap under normal document flow. The document flow is laid out first, and then separated from the normal document flow and displayed to the left or right of its parent element. Therefore, the floating element no longer wraps but is displayed next to the element.

Look at an example: no setting The style of the three floating blocks

block elements:

.block {     width: 200px;    height: 200px;}

These three blocks are displayed under the normal document flow, each element is displayed under the previous element Right below, now we set all three blocks to left float:

.block {     float: left;    width: 200px;    height: 200px;}

The effect can be seen here: left float

After floating, each block element will follow Behind the floating element. If the parent element does not have enough width, the floating element will wrap automatically. Look at this example, and then try to shrink the browser window, the floating block element will wrap automatically.

Clear floats

Floating elements are out of the normal document flow, so they will have an impact on the document structure after floating. Therefore, we must also Clear the float accordingly to restore the document structure to the normal document flow. There are many ways to clear the float. The first and most basic one is the corresponding clear attribute.

The attribute value of clear: left|right|both| inherit|none, the corresponding float corresponds to the corresponding clear float. Let's look at an example of floating. There are four block elements in total. The first two are floating and the last two are not floating. The structure is as follows:

<div class="block pink float"></div><div class="block blue float"></div><div class="block green"></div><div class="block orange"></div>

.block {    width: 200px;    height: 200px;}.float { float: left; }.pink { background: #ee3e64; }.blue { background: #44accf; }.green { background: #b7d84b; }.orange { background: #E2A741; }

Look here for the result

Hey, where did the green block go? Then look at the source code, select the HTML of the green block, it turns out that it is in pink Just below the color block. The two floated elements appear as we would expect, floating left and in a row, but they are out of the normal document flow, as if they are not there. So the first one is not floated The elements occupy their positions and are covered by the floating elements. So we need to clear the floats and let the green blocks display.

The code structure is as follows:

<div class="block pink float"></div><div class="block blue float"></div><div class="block green clear"></div><div class="block orange"></div>

.block {    width: 200px;    height: 200px;}.float { float: left; }.clear { clear: left; }.pink { background: #ee3e64; }.blue { background: #44accf; }.green { background: #b7d84b; }.orange { background: #E2A741; }

Through the clear:left css style, the green block is displayed. Correctly clearing floats can allow elements to float without affecting the normal document flow. The effect after clearing floats

Use float attribute for layout

Now that we are using DIV layout, DIV float is what most of us like to use to implement column layout. One method. Let’s look at a simple two-column layout.

The CSS is as follows:

#container {    width: 960px;    margin: 0 auto;}#content {    float: left;    width: 660px;    background: #fff;}#navigation {    float: right;    width: 300px;    background: #eee;}#footer {    clear: both;    background: #aaa;    padding: 10px;}

By setting #content to float left and #navigation to float right, The total width is #container to implement a two-column layout. It should be noted that #footer must clear the float, because there are both left and right floats at the same time, so use clear:both to clear the floats on both sides.

Let’s take a look at the result if #footer is not cleared of floats. Click here

Float priority

Floating elements are placed in different places in HTML The position will also produce different display results. Let's take a look at an example. Click here

In the example, the image floats to the right and is before the unfloated element P in the HTML structure. The code structure is as follows:

<div id="container">    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p></div>

#container {    width: 280px;    margin: 0 auto;    padding: 10px;    background: #aaa;    border: 1px solid #999;}img {    float: right;}

Now we change the structure of HTML and put the floating element IMG behind the P element.

<div id="container">    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" ></div>

Click here for specific effects

图片这时已经没有包含在#container里,因为浮动优先原则里,之前的例子都是浮动元素在未浮动元素之前,所以得到的结果都是在我们的预期之内,而现在我们没有按照这个规则写我们的HTML结构,所以图片溢出在了包含它的父元素之外,这是由于collapsing.

当一个父元素包含了一些浮动元素,而这些浮动元素并没有向它应该的方式围绕在未浮动元素周围时collapsing就出现了.正如上面的例子中,浮动元素IMG就像并不在#container中一样.

一个最常见去修复这个问题的方式就是在我们的浮动元素后面添加一个有清除浮动属性的元素,跟我们之前清除浮动的方式很像,只是新增了一个额外的元素,代码看下面:

<div id="container">    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <div   style="max-width:90%"></div></div>

但是新增了一行额外的代码并不是一个很好的方法,下面我们有几个其他的方法.

现在有一个HMTL,一个父元素有三个浮动的图片,代码结构如下:

<div id="container">    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" ></div>

#container {    width: 260px;    margin: 0 auto;    padding: 10px 0 10px 10px;    background: #aaa;    border: 1px solid #999;}img {    float: left;    margin: 0 5px 0 0;}

我们可以很快的意识到父元素并没有包含浮动的图片,因为浮动元素并不在文档流中,所以对于父元素来说它是空的,结果看这里

现在我们用CSS来修复这个问题而不是添加额外的HTML标记.有一个方法能让父元素自己清除它包含的浮动元素的浮动-overflow:hidden.要注意的是overflow属性并不是为清除浮动而设计的,它可以隐藏内容和滚动条.现在我们在#container上使用这个属性.

#container {    overflow: hidden;    width: 260px;    margin: 0 auto;    padding: 10px 0 10px 10px;    background: #aaa;    border: 1px solid #999;}

显示结果戳这里

还有清除浮动的方法就是使用伪类选择器:

#container:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}

总结:

浮动可以让你的布局变得随意和响应式,同时清除浮动的方式也有很多种,选择你最习惯和喜欢的方式,让布局变得更加优美.