Multiple ways to "webfrontend" layouts

The first time to write articles, clever tension!!!

This is a very simple layout, but a question worth pondering. For this kind of layout, you can have a variety of HTML, CSS, so how many kinds of writing?

My idea is to write different CSS depending on the layout of the HTML. This gives the element a fixed height for the effect.

1, the first kind of HTML layout

1-1. The first type of CSS layout:

This notation is a clear floating parent element that contains two left-floating child elements, each setting the width of the child elements.

The disadvantage of this writing is not flexible enough, the parent element and the child elements and margins are fixed write dead,

If the parent element container width changes, the width of the aside is constant, and the spacing is constant, the width of main is adjusted accordingly.

1-2. The second type of CSS layout:

This is a clear floating parent element that contains a left-floating child element, and the other element floats to the right, and the child element sets the width.

This kind of writing is not flexible enough, the same as the first layout, but this can be written without the use of spacing.

1-3. The third type of CSS layout:

This notation is a clear floating parent element that contains a left-floating child element and sets the width and right spacing, and the main element does not float or tube width.

This type of writing is flexible with respect to the first and second, and the main element does not have to consider setting the width, and when the parent element width changes, the main element width is self-adapting.

1-4. Fourth CSS layout:

This kind of writing is also more flexible ah, there are wood! Main element Adaptive width, don't worry.

1-5. Fifth CSS layout:

2. The second type of HTML layout

Sometimes we also put the main content on the right side, the sidebar content below, so that the important content to read first.

2-1, for this layout, I only think of a CSS for the time being:

3. Third HTML layout

3-1. The first type of CSS layout:

This type of writing is two columns and other high-level layout, but this method in IE6 under the Bug,aside does not show.

These different approaches involve many of the layout's knowledge points:

Float, clear float, include block, BFC, positioning mechanism, and so on.

I think there is no best layout, only fit the layout. Choose different methods in different situations.

"Buckle Buttoned"

Multiple ways to "webfrontend" layouts