Home > Developer > Web Develop
First, what is the floating thing going on?
Refer to the technical article: CSS floating in-depth study, the following are reading notes.
We used float float to do a lot of things other than their own work, so we will be confused, we will be back to see the true face of float. What is the real meaning of floating? The answer to this question is simple, assuming that there is no floating (float) property in the CSS, then what will it look like? We will find that the current popular use of floating methods, whether it is the column layout, or list arrangement we can use some other CSS properties (regardless of table) instead of implementation, the only implementation is "text around the picture", I can't think of any way to let text around the picture display. Well, this irreplaceable role is the real meaning of float.
Second, how to achieve the high-level layout?
French one: Double row with border layout
Tips: Use the wrapper border as the background of the sidebar, with the body of the wrapper as the background of the content
Law II: Multi-column and other high layout
Tips: Using negative margin-bottom and positive padding-bottom hedging, overflow:hidden to achieve a high-level layout
Short: You need to add the bottom border extra with absolute positioning
#wrapper{width:1024px;Height:100%;position:relative;background:Yellow;Overflow:Hidden;}#sidebar{width:224px;float: Left;background:Green;}#mainContent{width:800px;background:Pink;Margin-left:224px;}. Col{Padding-bottom:9999px;Margin-bottom:-9999px;}. Line1{position:Absolute;Bottom:0;width:224px;Height:1px;Background-color:Black;}. Line2{position:Absolute;Bottom:0;width:800px;Height:1px;Background-color:Black;}
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Multi-column Layouts</title></Head><Body><DivID= "wrapper"> <DivID= "sidebar"class= "Col">...<Divclass= "Line1"></Div></Div> <DivID= "MainContent"class= "Col">...<Divclass= "Line2"></Div></Div>
</Div></Body></HTML>
Lay the groundwork: How is the float going? How to achieve the high-level layout? How does CSS control text wrapping?
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
