<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3初识(五)布局——浮动</title> <style> .list > div:nth-child(2n+1){ width: 100px; height: 100px; } .list > div:nth-child(2n){ width: 150px; height:150px ; } .box1 { background-color : #bbffaa ; } .box2 { background-color : blueviolet ; float : left ; } .box3 { / * The reason why box3 does not float up is because box2 occupies a line of content (to be satisfied Equation requirements) * / background-color : orange ; float : left } .box4 { background-color : pink ; float : right ; } .box5 { background-color : yellowgreen ; float : left ; } .box6 { background-color : burlywood ; } / * By floating, an element can be moved to the left or right of its parent element, leaving The document flow float (float attribute): optional values: none: default value, the element does not float left: the element floats to the right right: the element floats to the right After the element is set to float, the equation of the horizontal layout does not need to be forced to establish (etc. For details, see the layout-chapter of the box model for the first time) After the element is set to float, it will be completely detached from the document flow, no longer occupying the position of the document flow, so the lower element will automatically move upwards Features: 1. The floating element will completely detach from the document flow and no longer occupy the position in the document flow 2. Setting After floating, the element will move to the left or right of the parent element 3. The floating element will not be removed from the parent element by default 4. When the floating element moves to the left or right, it will not exceed the other floating elements in front of it 5. If the floating element is above a non-floating block element, the floating element cannot move up. 6. The floating element will not exceed the floating sibling element above it. You can swap the two boxes (see picture). Other features: 1. The floating element will not cover the text, the text will automatically wrap around the floating element, so we can use the float to set the effect of the text surrounding the picture 2. Element settings after the float, it will be removed from the document flow, after detachment from the flow of the document, some of the characteristics of the elements will change Features from the document flow: block elements: 1, a block element is not a separate line of the page 2, later flow out of the document, a default width and height of the content of block elements are stretched Inline elements: 1. Inline elements will become block elements after they leave the document flow, with the same characteristics as block elements. After leaving the document flow, there is no need to distinguish between blocks and lines * / </ style > </ head > < body > < div class = "list" > < div class = "box1" > Box 1 </ div > < div class = "box4" > Box 4 </ div > < div class = "box2" > Box 2 <div div > < class = "box3" > Box 3 </ div > < p > The full text of the Dao De Jing [Chapter 1] is right, very good; famous, very famous. At the beginning of the nameless world, there is the mother of all things. Therefore, there is often no desire to observe its beauty; often there is desire to observe its merits (jiào). The two are synonymous with different names, the same is the mysterious, the mysterious and the mysterious, the door of all mysteries. 〖Translation〗 【Chapter 2】 All people in the world know that beauty is the beauty, and the evil (è) is already known; Therefore, there is no mutualism, it is difficult to make a difference, the length is short, the phase is high, the sound is harmonious, and it follows each other. It is based on the saints doing inaction, teaching without saying a word, all things do not say anything, they are born without it, they do not persevere, and succeed in life. The husband (fú) lives only, so he doesn't go. 〖Translation〗</ p > </ div > < div class = "box5" > Box 5 </ div > < = "box6"盒子6</div> </body> </html>
