S1/developing commercial sites using HTML language and CSS/07-floating

Floating

In a standard document flow, a block-level element automatically stretches in the horizontal direction until the bounds of the element that contains it, arranged in the vertical direction and in the other block-level elements.

To implement the float you need to set the float property in the CSS, the default value is None, which is what the standard document flow block level elements typically display. If the value of the float property is set to left or right, the element floats to its parent element, either to the side or to the side, and by default the width of the box is no longer stretched, but is determined by the contents and width of the box, which enables the "1-2-1" or "1-3-1" in the page layout. The layout type.

Application of floating in Web pages

In CSS, the floating (float) property allows the layout of many other Web pages to be implemented in addition to the horizontal multi-column layout of the Web page.

Property value of float

Property value	Description
Left	Element floats to the left
Right	Element floats to the right
None	The default value. The element does not float and displays where it appears in its text

Clear floating

In the previous tutorial, we thoroughly analyzed the floating properties in CSS, and knew that because some elements were set to float, it would affect the position of other elements in the page layout, what if the elements in the standard document flow behind it were not affected by other floating elements?

The Clear Property works in CSS to eliminate the effects of floating elements on other elements.

Clear floating effects

The clear Property in CSS specifies which side of an element does not allow other floating elements, and its common values are shown in the following table.

Clear Property Value

Value	Description
Left	Floating element not allowed on left
Right	Floating elements are not allowed on the right
Both	Floating elements are not allowed on the left and right sides
None	Default value, allowing floating elements to appear on both sides

If you want to eliminate floating elements on both sides of the label, use the clear Setup code as shown below.

img{

Clear:both;

}

the clear property is often used to clear the effects of floats and extend the height of the box model.

Expansion box Height

With regard to the function of the clear property, processing is used to eliminate the floating effect and can also be used to extend the height of the box.

The scope of a <div> is determined by the content of the standard document stream inside it, regardless of the floating content inside it.

Overflow handling

Overflow Property

In CSS , you can use the overflow property to handle the overflow of content in a box . It specifies what happens when the content overflows the box, such as content that is not clipped and rendered outside the box, or that the content is clipped, the content is hidden, and so on.

common values for the Overflow property

Property value	Description
Visible	Default value, content will not be trimmed and will be rendered outside the box
Hidden	The content is trimmed and the rest is not visible
Scroll	The content is trimmed, but the browser displays a scroll bar to see the rest of the content
Auto	If the content is trimmed, the browser displays a scroll bar to view the rest of the content

the magical properties of Overflow

The overflow property in CSS can be used in conjunction with the box width in addition to handling the overflow of the box content, clearing the float to extend the height of the box. Since this method does not produce redundant labels, you only need to set the outer box width and the overflow property value to Hirdden , so this method is commonly used to set the effect of the outer box containing floating elements inside the layer.

Use the overflow property to finish clearing floating and extending box heights. The Setup method is very simple, just set the width for the outer element of the floating element father and set the overflow property to hidden, and use the clear floating code "<div Class= "Clear" ></div> " can be completely removed, and do not need to be added to the HTML code."

As can be seen from the above code, to achieve the same effect, using the overflow property with the width to clear floating and expand the box height, than the use of the clear Property code is significantly reduced, but also reduce the empty HTML tags. The benefit of this is to make the code more concise and clear, which improves the readability of the code and the performance of the Web page.

However, if there are absolutely positioned elements in the page, and the absolute positioning element is outside the scope of the parent, it is not appropriate to use the overflow property, and you need to use the clear property to clear the float.

Therefore , the clear property and the overflow property are implemented to remove the float to extend the height of the box, according to their respective characteristics and the actual needs of the Web page to set the expansion box height.

S1/developing commercial sites using HTML language and CSS/07-floating