One, float float: float:left/right/none/inherit; (Inherit inherit floating from parent, incompatible with some browsers, generally not used)
1. Block in a row display
2. Inline elements support wide height
3. Default Content Open width
4. Out-of-document flow (document flow is where objects can be displayed in a document, where they are placed in the arrangement)
Characteristics:
1. Floating elements will not overwrite any text or inline labels, and all text or inline labels will wrap around the floating elements
2. Floating elements will overwrite the background and border of the block label
3. Once an element has a floating property set, the element moves in the direction of the setting until it touches the parent or browser edge, or the previous floating element, stops floating.
4. The level of floating elements is higher than the level of normal block elements
Second, clear floating
Clear:left/right/both/none/inherit: No floating element in one direction of all elements in front of a sibling
Clear:both; no floating elements are allowed on the left and right sides of all elements in front of the sibling.
Method: 1. Heightening
Problem: Poor extensibility
2. Parent-Floating
Problem: All elements in the page are floating, margin is automatically invalidated (floats bad!)
3.inline-block Clear Float method
Problem: Automatic failure of margin around;
4. Empty label Clear float
Problem: IE6 minimum height 19px; (IE6 and 2px Deviation after resolution)
5.br Clear Float
Problem: does not conform to the work: structure, style, behavior, three separate requirements.
6.after pseudo-Class clear float method (now the mainstream method)
Clear:after{content: ""; display:block;clear:both;} (for mainstream browsers)
Clear{zoom:1;} (suitable for IE6,IE7 zoom: Zoom A, trigger ie under the haslayout, so that the element according to its own content to calculate the width of high B, FF is not supported)
For example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> pseudo Elements </title>
<style type= "Text/css" >
#div1 {
font-size:80px;
}
#div1: Before {
/*content: "This is a piece of text added via CSS. ";*/
Content: "";
Display:block;
width:300px; height:100px; Background:pink;
}
#div1: After {
Content: "This is what the after pseudo element adds";
Display:inline-block;
Background:orange;
}
/*
Pseudo-elements:: Before:after (often referred to as pseudo-classes)
A pseudo-element is a way to add a special tag to a page by using CSS commands. This tag is displayed by default as a feature of the inline label. This tag can support most CSS styling settings.
*/
</style>
<body>
<div id= "Div1" >
This is the text in the page layout structure.
</div>
</body>
7.overflow:hidden Clear Float method
Problem: Need to match width or zoom compatible IE6 IE7;
Overflow:scroll/auto/hidden;
Overflow:hidden; overflow hide (cutter!) ）
Third, floating compatibility issues
1.ie6 Double-sided bug (IE6 the next block property label floats with horizontal margin, horizontal margin doubled):
A, IE6
B, floating
C, Horizontal margin
d, block attribute tag (plus _display:inline;)
2.ie6 under Li some compatibility issues:
A, left and right two-column layout, IE6 IE7 down the left-hand float;
B, IE6 IE7 Li under the elements are floating under the IE6 IE7 under Li will produce 4px gap problem; (plus vertical-align:top;)
3.vertical-align/img questions:
A, Vertical-align vertical alignment
1. Add vertical alignment to the same row element with vertical alignment
2. Vertical alignment can solve the gap under the element
b, the picture below the gap problem
1.display:block; (change the label's own characteristics)
2.overflow:hidden; (Must know the height of the picture)
3.vertical-align (The perfect solution for the moment)
h5--float and Clear float
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
