The previous element was set to float
The next element floats underneath the previous element.
To be covered by the last element
Want to be overwritten to clear floating
Clear:left Clear:right
Left floating element does not overwrite the right element without overwriting
Clear:both;
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <title>Document</title> <style>#header{Height:200px;width:200px;background:Blue;Color: White;float: Left; }#content{Height:200px;width:200px;background:Green;Color: White;float: Left; }#footer{Height:200px;width:200px;background:Grey;float: Left; }#footer2{Height:200px;width:200px;background:Yellow;float: Left; }#main{Clear:both; } </style></Head><Body> <DivID= "header">Header</Div> <DivID= "Content">Content</Div> <DivID= "Main"></Div> <DivID= "Footer">Footer</Div> <DivID= "Footer2">Footer</Div></Body></HTML>
1