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

This article mainly introduces how to remove floats in the layout of html pages, which is very detailed and has a certain reference value. Friends who are interested must finish reading it!

The height of the box

1. The height of the box in the standard stream can be held up by the content.

two。 The floating content in the floating stream cannot hold up the height of the box.

Why float clearly?

Between adjacent boxes, if the front box has no height, then the floating element in the back box will look for the floating element in the front box, which will lead to confusion in the interface, so it is necessary to clear the float.

Clear floating mode 1:

Solution:

Set the height to the previous parent element

Note:

In enterprise development, we can not write height without height, so this method is rarely used.

CSS:

* {

Margin:0

Padding:0

}

.box1 {

Height:20px;// sets the height of the front box

Background-color:red

}

.box2 {

Background-color:green

}

.box1p {

Width:100px

Background-color:blue

}

.box2p {

Width:100px

Background-color:yellow

}

P {

Float:left

}

Body:

I am text 1.

I am text 1.

I am text 1.

I am text 2.

I am text 2.

I am text 2.

Clear floating mode 2:

Solution:

Add a clear:both; attribute to the back box

The value of clear attribute:

None: default value, sorted according to the sorting rules of floating elements (left float looking for left float, right float looking for right float)

Left: don't look for the previous left floating element (that is, do not display on a line with the previous left floating element)

Right: don't look for the previous right floating element

Both: don't look for the previous left and right floating elements

Note:

When we add a clear attribute to an element, the margin attribute of that attribute becomes invalid; therefore, it is not recommended to use the

CSS:

* {

Margin:0

Padding:0

}

Body {

Border:1pxsolid#000

}

.box1 {

Background-color:red

}

.box2 {

Background-color:green

Clear:both;// adds a clear:both; attribute to the following box

Margin-top:28px

}

.box1p {

Width:100px

Background-color:blue

}

.box2p {

Width:100px

Background-color:yellow

}

P {

Float:left

}

Clear floating mode 3:

Solution:

Exterior wall method: add an additional block-level element between two boxes with floating child elements; and set the clear:both; attribute

Note:

The exterior wall method allows the second box to use the margin-top property.

The exterior wall method cannot make the first box use the margin-bottom property.

However, you can achieve the margin effect by setting the height of the extra label

This technique is widely used in Sohu, but it is not recommended because a large number of meaningless tags need to be added.

CSS:

* {

Margin:0

Padding:0

}

.box1 {

The background-color:red;/*margin-bottom:10px;*/// exterior wall method does not allow the first box to use the margin-bottom property

}

.box2 {

The background-color:green;/*margin-top:10px;*/// exterior wall method allows the second box to use the margin-top property.

}

.box1p {

Width:100px

Background-color:blue

}

.box2p {

Width:100px

Background-color:yellow

}

P {

Float:left

}

.wall {

Clear:both;// sets the clear:both; property

}

.h30 {

Height:20px;// sets the height of the extra tags to achieve the margin effect

Background-color:skyblue

}

I am text 1.

I am text 1.

I am text 1.

/ / exterior wall method: add an additional block-level element between two boxes with floating child elements

I am text 2.

I am text 2.

I am text 2.

Clear floating mode 4:

Solution:

Interior wall method:

1 add an additional block-level element at the end of all child elements in the first box

2 set the clear:both; attribute for this additional block-level element

Note:

The interior wall method allows the second box to use the margin-top property.

The interior wall method allows the first box to use the margin-bottom property.

The interior wall method automatically props up the height of the box, so you can set the margin property directly

The difference between the outer wall method and the inner wall method?

The outer wall method cannot support the height of the first box, while the inner wall method can support the height of the first box.

Partition method is not commonly used to remove floats in enterprise development (partition method: exterior wall method and inner wall method)

CSS:

* {margin:0;padding:0

} .box1 {background-color:red;/*margin-bottom:10px;*/

} .box2 {background-color:green;/*margin-top:10px;*/

} .box1p {width:100px;background-color:blue

} .box2p {width:100px;background-color:yellow

} p {float:left

} .wall {clear:both

} .h30 {height:20px;background-color:skyblue

}

I am text 1.

I am text 1.

I am text 1.

/ / set the interior wall

I am text 2.

I am text 2.

I am text 2.

The above is all the contents of the article "how to remove floats in the layout of html pages". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.