CSS design Guidelines floating and clearing

Text: CSS Design guide floating and Clearing

Floating means to take the elements out of the regular document flow, floating elements out of the regular flow of the document, the original immediately after the elements will be allowed in space, the upward rise to the same as floating elements.

A. Floating

The main purpose of the CSS design float property is to achieve the effect of text wrapping pictures. However, this attribute also becomes the simplest way to create a multi-column layout.

1. Text Wrap Picture

When you float a picture or other element, you are asking the browser to push it upwards until it touches the inner bounds of the parent element. The subsequent paragraph no longer considers the floating element to be in front of it in the document flow because it occupies the upper-left corner of the parent element. However, its content will bypass the floating elements.

2. Create columns

On this basis the paragraph is also floating upward, but to set the paragraph width

In other words, if several adjacent elements have a set width, are floating, and the horizontal space is sufficient to accommodate them, they will be lined up in a row.

Two. Three ways to enclose floating elements

A floating element is detached from the document stream, and its parent element cannot see it, and thus does not surround it. As you can see clearly, the section element does not enclose the floating image, which causes the footer element to move up the section element.

This is not the effect we want, we want the footer element to be arranged below the image element. What's the way to solve this problem?

Method One: Add Overflow:hidden to the parent element

In fact, the real purpose of the Overflow:hidden declaration is to prevent the inclusion element from being large by the oversize content. After applying Overflow:hidden, the containing element retains its set width, while the extra-large child content is clipped by the window. In addition, Overflow:hidden has another use that forces the parent element to contain its floating child elements.

Method Two: Floating the parent element at the same time

One thing to note, however, is that, because the section element is floating, even if it is a block element, it will scale to the size of its content, and it needs to be explicitly set width:100% to remain the same width as the browser. At the same time floating section,footer will try to push up to the floating element next to the need to set the clear property of footer, the cleared element will not be promoted to the floating element next.

Method Three: Add non-floating purge elements

The third method of forcing a parent element to contain its floating child elements is to add a non-floating child element to the parent element at the end, and then clear the element. There are two ways to add a child element as a clear element at the end of the containing element.

1. Add a child element to the HTML tag, and then clear the element.

2. Apply Clearfix Rules

CSS design Guidelines floating and clearing