Home > Developer > Web Develop
for the front-end beginners, CSS floating part of the knowledge is a more difficult to understand the part, below I will learn from my experience in the process of sharing to everyone.
Guide:1.css block-level element explanation
How floating is generated in 2.css
3. How to clear the float after floating (this article will cover a variety of methods to clear the float)
1.CSS block-level elements explained
Common block-level elements include the following:<div>, <p>, ,<dir>,
The characteristics of block-level elements in CSS: block-level elements can be set to a wide height, if not set, the default is the width of the parent container, always start on new lines and exclusive row, height, row height and margin and padding can be controlled, can accommodate inline elements and other block elements;
How floating is generated in 2.css
In the layout of the page in order to better layout, layout more convenient, so we inevitably use element floating, in the CSS we use float to set the float. Let's explain the float in detail:
See, when you float box 1 to the right, it moves out of the document stream and shifts to the right until its right edge touches the right edge of the containing box:
again, when Box 1 floats to the left, it is out of the document stream and moves to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document flow, it does not occupy space, actually covers box 2, so that box 2 disappears from view.
If you move all three boxes to the left, the box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until you hit the previous float box.
As shown, if the parent container's containing box is too narrow, and if the three elements are set to float, if the three floating elements are arranged horizontally beyond the width of the containing box, then the floating block that follows is moved downward until there is enough space. If the height of the floating element is different, the front element height is higher than the element that is squeezed back, then it may be "stuck" by other floating elements when they move down:
After the float has been set in the actual development, sometimes we need to clear the float, once we need to understand the clear property.
3. How to clear the float after floating (this article will cover a variety of methods to clear the float)
to clear the floating syntax:
Clear:none | Left | Right | Both
Value:
None: Default value. Allowed to have floating objects on both sides
Left: does not allow floating objects
Right: Do not allow floating objects
Both: Floating objects are not allowed
Keep in mind: CSS floating rules can only affect the elements that are used, and do not affect other elements.
Before we actually discuss the removal of floats, let's discuss why we want to clear the float, first look at the following example to help better understand why the float is cleared:
The code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
. Div1{width:200px;height:200px;background:orange; float:left;}
. Div2{width:200px;height:200px;background:green; float:left;}
. div3{width:200px;height:200px;background:red; float:left;}
. outer{border:1px solid #ccc; background: #fc9; color: #fff;}
</style>
<body>
<div class= "outer clear-outer" >
<div class= "Div1" >1</div>
<div class= "Div2" >2</div>
<div class= "Div3" >3</div>
<div class= "Clear" >3</div>
</div>
</body>
The following three points are the main effects of non-clear float;
1. Background cannot be displayed
2, the frame can not be open
3, margin padding setting value is not displayed correctly
To clear floating methods:
Method One:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
Method Two: parent div definition overflow:auto
.clear-outer{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }
Method Three:
. outer {zoom:1;} /*==for IE6/7 maxthon2==*/
. outer:after {clear:both;content: '. '; Display:block;width:0;height:0;visibility:hidden;} /*==for ff/chrome/opera/ie8==*/
This method of clearing floating is now a clear float on the Internet, he is using: after and: Before to insert two elements inside the element, from the face to clear the effect of floating. The implementation principle is similar to the Clear:both method, except that: clear inserts a div.clear tag in HTML, and outer uses its pseudo-class clear:after to add a div.clear-like effect inside the element.
The effects of clear float are shown below:
Summary:
Although there are many ways to clear the float, but not every one is suitable for you, and not each can be very good compatible with all browsers, so you think the best way to do, personally think the method is three good, do not need more than the label, but also very good compatibility.
Read more about floating in CSS and how to clear floats
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
