css013 building a floating-based layout

css013 building a floating-based layout

Floating-based layouts take advantage of the float property to be the element on the page side-by, and create columns

Float has three values: left, right, none

1. Suppose you want to float a picture to the left of the page

. float-left{

Float:eft;

}

If you want to float a full <div> of content to one side, form a side bar

. sidebar{

Float:left;

width:150px;

}

2. Designing a simple Two-column layout requires several steps

A. Wrap each column in a <div> tag with ID or class attribute

b, the sidebar <div> float to the left or right

C, set a width for the floating sidebar

The width can be a fixed size, or it can be a flexible setting based on the width of the browser window, using percentages.

D. Add a margin-left to the body

(Be careful to figure it out)

First, lay out with floating

1. Let all columns float so that all columns should be aware of the width of each column, and the sum of the column widths should be less than the total width

2. Floating in floating elements

3. Floating in floating elements

Second, Overcoming floating problems

1. Clear float and keep floating

A, add a clear element at the bottom of <div>

b, floating peripheral elements: let floating elements of the <div> also float up

C, the use of Overflow:hidden; (if there are absolutely positioned elements in the container, they may not show up.) For example: When a drop-down menu has another label or drop-down menu, it will not show up)

D. Use Mico Clear Fix

Using an HTML partitioning element, add a class, such as:

<div class= "Clear" >

Write in CSS:

. clear{

Clear:both;

}

2. Multi-Column Layout

Third, layout of multiple columns

1. Set Column items: Column-count

To set the interval between column columns: Column-gap

Draw a line between columns: Column-rule

For example, define a class named: Multicol for this class, create a 3-column layout, Interval 1em, and add a black dashed line

. multicol{

Column-count:3;

Column-gap:1em;

column-rule:1px dotted black;

}

3. Create a column with full page height

Suppose there is a 3 column design, the first column is 25% wide, the second is 50%, and the third column has 25%. You want the background color to be red, white and blue.

<div class= "wrapper" >

<div class= "Sidebar1" >hello everyone!</div>

<div class= "Main" >i am the main content</div>

<div class= "Sidebar2" >nice to meet you!</div>

</div>

Add a linear gradient to match the color station to the width of the column

. wrapper{

Background-color:linear-gradient (left,

red:0%,

red:25%,

white:25%,

white:75%,

blue:75%,

blue:100%);

}

Add the code for the vendor version:

......

4. Prevent floating drops

Floating drop (float drop) Always hesitates no group no space accommodates all columns caused by

5, with box-sizing to prevent floating whereabouts

The three values for box-sizing are as follows:

A, Content-box

B, Box-sizing:content-box

Screen width +padding value +border value of the Width property value

C, Padding-box

Box-sizing:padding-box

Screen width +padding value of the Width property value

D, Border-box

Box-sizing:border-box

Screen width +border value of the Width property value

css013 building a floating-based layout