tutorial on resolving HTML element floats

Tutorials | solving | problems | Floating 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, using 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 approach is currently well compatible with multiple browsers, and you can complete the layout you want without adding additional elements.