Shulou(Shulou.com)06/03 Report--

This article mainly explains "the usage of CSS attribute float". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the usage of CSS attribute float.

Let's take a look at the important attribute of CSS-- float.

The following is divided into the following sections:

1:float attribute

Properties of the 2:float attribute

Text wrapping effect of 2.1:float

The parent element of 2.2:float is highly collapsed

3: clear the method of floating

3.1:html method

3.2:css pseudo element method

4:float desegregation

Blocking of 5:float elements

6:float fluid layout

6.1: unilateral fixation

Unilateral fixation with different 6.2:DOM and display position

Unilateral fixation with 6.3:DOM in the same position as the display

6.4: smart layout

1:float attribute

Float, as its name implies, means floating or floating. But in css, it is understood as floating. Float has four properties, namely

CSS Code copies content to the clipboard

Float:none

Float:left

Float:rightright

Float:inherit

The two more commonly used property values are left float and right float. In the following sharing, only the left float will be used as an example. The other floating property values are the same as the left floating principle.

Properties of the 2:float attribute

Text wrapping effect of 2.1:float

The original purpose of floating is to surround the text.

Look at the following code and demo.

XML/HTML Code copies content to the clipboard

Hello World!Hello World!Hello World!Hello World!

CSS Code copies content to the clipboard

.container {

Width: 300px

Height: 300px

Border: 1px solid black

}

.container .content {

Float: left

Width: 150px

Height: 150px

Background-color: lightpink

Margin: 5px

}

The content element sets the left float so that the div element is detached from the document stream and the text is displayed around it.

The parent element of 2.2:float is highly collapsed

Take the div element as an example. The height of the div element is automatically stretched out by the content. In other words, the height is as high as the content. However, when the float attribute is set for the inner element, the parent element will collapse highly. The code and examples are as follows.

XML/HTML Code copies content to the clipboard

Hello World!Hello World!Hello World!Hello World!

As follows, css and demo after collapse.

CSS Code copies content to the clipboard

.container {

Width: 300px

Border: 1px solid black

}

.container p {

Float: left

}

3: clear the method of floating

So the question is, if the internal element wants to set a float, how to avoid the problem of the parent element collapsing highly?

Some students will certainly think, can't you just set the height in the parent element? This is not feasible in practice. Because if you fix the height of the parent element, if you want to add content to it later, you don't have to modify the css code again, which is very troublesome.

There are two ways to solve the high collapse of the parent element.

Add an empty div at the bottom of the parent element, and then add the attribute clear: both.

The code is as follows.

XML/HTML Code copies content to the clipboard

Hello World!Hello World!Hello World!Hello World!

CSS Code copies content to the clipboard

.container {

Width: 300px

Border: 1px solid black

}

.container p {

Float: left

}

.container .clearfix {

Overflow: hidden

* zoom: 1

}

3.2The parent element sets the pseudo class after.

XML/HTML Code copies content to the clipboard

Hello World!Hello World!Hello World!Hello World!

CSS Code copies content to the clipboard

.container {

Width: 300px

Border: 1px solid black

* zoom: 1

}

.container p {

Float: left

}

.container: after {

Content: ""

Display: table

Clear: both

}

De-space of 4:float element

What does it mean? In the usual coding, in order to comply with the HTML coding specification, the html tag will be indented to achieve a beautiful effect. But when you indent, there will be spaces, that is. When you set a left float for an element, the element itself floats to the left, and the remaining spaces are squeezed to the end, that is, the text wrapping effect mentioned above. Keep in mind, however, that the effect is slightly different from that of typing the space by pressing enter.

Blocking of 5:float elements

After setting the floating attribute for the inline element, the display attribute changes from inline to block. And you can set the width and height for inline elements. Some simple fixed-width layout effects can be achieved by using the float plus width attribute.

6:float fluid layout

6.1: fixed on one side and adaptive layout on the right.

XML/HTML Code copies content to the clipboard

Left floating + fixed width

Right adaptive width + margin-left

CSS Code copies content to the clipboard

.container {

Max-width:90%

Margin:0 auto

}

.left {

Float:left

Text-align:center

Background-color: lightpink

Width: 200px

Height:300px

}

.rightright {

Background-color: lightyellow

Margin-left:200px

Height:300px

Padding-left:10px

}

Unilateral fixation with different 6.2:DOM and display position

XML/HTML Code copies content to the clipboard

Right floating + fixed width

Left adaptive width + margin-right

CSS Code copies content to the clipboard

.container {

Max-width: 90%

Margin: 0 auto

}

.container .rightright {

Float: rightright

Width: 200px

Height: 200px

Background-color: lightpink

}

.container .left {

Background-color: lightyellow

Margin-right: 200px

Height: 300px

Padding-left: 10px

}

That is, the html element is not in the same location as the element displayed on the page.

Unilateral fixation with 6.3:DOM in the same position as the display

XML/HTML Code copies content to the clipboard

Margin-right

Left float + fixed width + negative margin-left

CSS Code copies content to the clipboard

.container {

Max-width: 90%

Margin: 0 auto

}

.container .rightright {

Float: left

Width: 200px

Height: 200px

Background-color: lightpink

Margin-left:-200px

Height: 300px

}

.container .left {

Background-color: lightyellow

Margin-right: 200px

Height: 300px

Text-align: center

}

6.4: smart layout

The so-called intelligent layout means that the width of the two columns does not need to be set, and the width adapts to the content.

XML/HTML Code copies content to the clipboard

Float+margin-right+ adaptive width

Display:table-cell-IE8+

Display:inline-block-IE7+

Adaptive width

CSS Code copies content to the clipboard

.container {

Max-width: 90%

Margin: 0 auto

}

.container .left {

Float: left

Height: 300px

Background-color: lightpink

}

.container .rightright {

Display: table-cell

* display: inline-block

Height: 300px

Background-color: lightyellow

}

CSS Code copies content to the clipboard

.container {

Max-width: 90%

Margin: 0 auto

}

.container .left {

Float: left

Height: 300px

Background-color: lightpink

}

.container .rightright {

Display: table-cell

* display: inline-block

Height: 300px

Background-color: lightyellow

}

Summarize the following:

1: when an element sets the float attribute, it blocks the element.

The original intention of the 2:float attribute is to create the text wrapping effect.

The 3:float element causes the parent element to collapse highly.

The 4:float element removes the spaces caused by line breaks.

5: using float, you can achieve a two-column adaptive layout.

At this point, I believe you have a deeper understanding of the use of "CSS attribute float". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.