Tip: Div+css the solution to floating problems when designing Web pages

css| Floating | tips | solution | design | Web page | The most common method I use before the problem is two kinds:

method One:

Using block-level clear, the class property that declares a block is. clear {Clear:both;}

Method Two:

Use inline element cleanup, such as after the main floating content, with an inline element.

. inlineclear {Clear:both}


method Three: Use two-layer div nesting

#pubpage {Display:block;clear:both;}
#main {display:block;float:left;}

Content

In this case, the internal main will be floating to prop up the

method Four:

/******clear float*******/
. clearfix:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}

. clearfix {Display:inline-table}

/* Hides from Ie-mac \*/
* HTML. Clearfix {height:1%}
. clearfix {Display:block}
/* End Hide from Ie-mac * *

On the class attribute of a container that you want to represent as a block, but this attribute must be the first, such as

The fourth method currently can be very good compatible with a variety of browsers, and do not add additional elements to complete the desired layout, please see here http://www.positioniseverything.net/easyclearing.html

With these kinds of methods, you don't have that much trouble with div+css layout.