Share Div+css clear floating common methods summary

The following small series for you to share div+css clear floating common methods summary. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

P+css Clear Floating is a common problem in the layout of the page, I believe that you have their own methods, and today here on a number of common methods to summarize (PS: Is not original, here is my own to do the summary, but also my own internal process), I hope you can be helpful.

P+css floating effect refers to the fact that the parent element is not defined high, because the child elements are floating out of the text stream, resulting in a high collapse of the parent element (PS: Under normal circumstances, the height of the parent element is propped up by a child element), or because of the partial sub-elements of the floating, out of the text flow, resulting in the

P+css common methods for clearing floats are as follows:

1, add Clear:both to the CSS of the non-floating child elements, if the child elements have floating, you can add a new empty child element, and to its CSS added Clear:both, this can be used to clear the left and right floating child elements to re-prop up the parent element, so as to achieve clear floating effect. The code and effects are as follows:

<style type= "Text/css" >    . Fl{float:left;}    . Demo{background: #ccc;}    . Item1{background: #F571E3; height:100px;width:100px;}    . Item2{background: #21B2F7; height:200px;width:100px;clear:both;}    </style>    
Item1 the effect of the left float before the float is cleared (the height of the parent element is now highly stretched by the non-floating item2 Element):


The effect of item1 right floats before the float is cleared (the height of the parent element is now highly stretched by the non-floating item2 Element):


Clears the floating effect (because P is a block-level element and will have a single row, so item2 will be on the following line, where the height of the parent element is highly stretched by the item1 element and the item2 element):


2, when the child elements are all floating, add Overflow:hidden to the parent element's CSS, (the non-floating element will open the parent element's height when the child element is not all floating, but the layout caused by the floating element should be modified with padding), However, the parent element of this method cannot be repositioned using position, otherwise it will not work. The code and effects are as follows:

<style type= "Text/css" >    . Fl{float:left;}    . Demo{background: #ccc; overflow:hidden;}    . Item1{background: #F571E3; height:100px;width:100px;}    . Item2{background: #21B2F7; height:200px;width:100px;}    </style>    
Clear the effect before the float, due to the high collapse of the parent element, so the background background: #ccc; No effect:



To clear a floating effect:


3. Add pseudo-class to the parent element: After and zoom, the code and Effect are as follows:

<style type= "Text/css" >    . Fl{float:left;}    . Demo{background: #ccc; zoom:1;}    . Demo:after{display:block;clear:both;content: ""; visibility:hidden;height:0}   . Item1{background: #F571E3; height:100px;width:100px;}    . Item2{background: #21B2F7; height:200px;width:100px;}    </style>    
Clear the effect before the float, due to the high collapse of the parent element, so the background background: #ccc; No effect:



To clear a floating effect:


4. If you are using BOOTSTRAPT, you can add Class Clearfix to its parent element, with the following code and effects:

<style type= "Text/css" >    . Fl{float:left;}    . Demo{background: #ccc;}    . Item1{background: #F571E3; height:100px;width:100px;}    . Item2{background: #21B2F7; height:200px;width:100px;}    </style>    
To clear a floating effect:


Each of the above methods have pros and cons, we can choose to use according to their own understanding, there are some other ways to clear the float, such as the parent element floating, let the parent element display:table and so on, the individual is not recommended to use.

Above this p+css clear floating commonly used method summary is small part share to everyone's all content, hope can give you a reference, also hope that we support topic.alibabacloud.com.