Lay the groundwork: How is the float going? How to achieve the high-level layout? How does CSS control text wrapping?

Source: Internet
Author: User

First, what is the floating thing going on?

Refer to the technical article: CSS floating in-depth study, the following are reading notes.

    1. The original meaning of the float

      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?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.