Home > Developer > Web Develop
CSS Float (float)
Float is a CSS style that sets the left and right floats of the label, and the floating element is not part of the HTML document stream, and the document needs to be dragged back into the document stream with clear float.
Floating Value:
Left: Floating
Right: float to starboard
HTML document flow: From a form to a line from top to bottom, and emit elements from left to right in a row.
Use examples to explain floating
1. There are two block elements on the page, with each block element exclusive of one row
2. We want them to be able to display side by side, this is to use float, we first add float:left to the Red Div and find out that two are on one line, but they overlap.
3. This is because the element with the float does not eliminate the exclusive line and will "float" on top of other elements
4. Our Blue Div is also added to float, when normal, two Div shows together.
As follows:
Empty div tag at the end clears the float in a clear way
A. Just now the example has been completed side-by-side layout, then I need to add a third block element, named D3, then found that D3 is pressed under the first two blocks of elements
B. As I said earlier, the elements that add float will float on top of other elements, in fact, because they are not part of the normal HTML document flow, and then how many elements and it has nothing to do with it, he is always floating on top.
C. We just want him to have a non-exclusive line and don't want him to be a document flow. So you can use Clear:both to drag the float element back into the document stream.
Example:
DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
div{width:200px; height:200px;}
. d1{background:red; float:left;}
. d2{background:blue; float:left;}
. d3{background:green; width:500px; height:500px;}
. clear{clear:both; width:0px; height:0px;}
</style>
<body>
<div class= "D1" ></div>
<div class= "D2" ></div>
<div class= "Clear" ></div>
<div class= "D3" ></div>
</body>
Shown below: (not finished)
Practice
Use float to complete the layout of Baidu aggressively film:
Practice as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<link rel= "stylesheet" type= "Text/css" href= "Css/reset.css"/>
<style type= "Text/css" >
. Myleft{float:left; width:270px;}
. Mright{float:left;}
. Clear{clear:both; height:0px;}
A{text-decoration:none;}
H3 a i{font-style:normal; color:red;}
H3 a{line-height:35px; font-size:20px; font-weight:normal; border-bottom:1px solid Blue;}
h4{font-size:25px; font-weight:normal;}
H4 span {color: #388bff; font-size:30px; line-height:50px;}
. Mylink{background:url ("Img/qq20161220222807.png") No-repeat right center; width:140px;}
. Mylink{color: #87b6b1;}
</style>
<body>
<div class= "cont" > <!--container abbreviation cont, Meaning is the content (large div is generally named-->
<div class= "Myleft";
</div>
<div class= "Mright";
<p> Release date: 2016 release </p>
<p> Director: <a href= "#" > Shentaro </a></p>
<p> Starring: <a href= "#" > Lee min ho </a> <a href= "#" > Release </a></p>
<p> Type: Action </p>
<p class= "MyLink" >v.baidu.com <a href= "#" ></a></p>
</div>
<div class= "Clear" ></div>
</div>
</body>
Shown below:
CSS Float (folat), clear floating (clear)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
