Comprehensive Analysis of float website construction layout

A comprehensive analysis of the float website layout is a website page layout attribute. If it is used properly, it will bring good results. Almost all website la s can be implemented, if you are interested in patience, let's take a look:

◆ Float

Purpose: set the elements to float around adjacent elements, such as text around an image to produce text wrapping effect.

Value: Optional values: left, right, and none. left. The elements are moved to the left of other elements.

Move to the right; none indicates not floating. None is the default value.

Common settings

. Currently, website building mainly uses div + css website layout. Therefore, many layout applications usually use css styles. Today, we will take the home page of the Tmall slimming network as an example to explain it to you. Let's take a look at the layout chart of its home page, which is the layout chart after my analysis, so that you can watch it easily.

 

　　

 

From this figure, we will show the obvious signs. Here we will mainly introduce 1 ~ 4 Layout, because 1 ~ The 4 Layout contains all the la s of the home page, and others are found in this small epitome! You can set ~ The layout of 4 can be expressed as (1 + 2) + 3) + 4.

1. 1 + 2 refers to layout div1 and div2, <div id = "1"> </div> <div id = "2"> </div>;

2. then it is classified as "1 + 2" as a whole ": <div id = "1 + 2"> <div id = "1"> </div> <div id = "2"> </div>;

3. then layout (1 + 2) + 3): <div id = "1 + 2" style = "float: left "> </div> <div id =" 3 "style =" float: right "> </div>. In this way, 1 + 2 is left suspended, hover 3 to the right;

4. then it is classified as "1 + 2 + 3": <div id = "1 + 2 + 3"> <div id = "1 + 2" style = "float: left "> </div> <div id =" 3 "style =" float: right "> </div>;

5. then layout (1 + 2) + 3) + 4: <div id = "1 + 2 + 3" style = "float: left "> </div> <div id =" 4 "style =" float: right "> </div>;

6. then it is classified as "1 + 2 + 3 + 4 ": <div id = "1 + 2 + 3 + 4"> <div id = "1 + 2 + 3" style = "float: left "> </div> <div id =" 4 "style =" float: right "> </div>, it is defined as div4 in other la s of the website structure.

You can format the layout of all-night pages into n small modules and list them in sequence, that is, the entire layout. For details, you can go to the Tmall slimming network and check whether the overall layout is quite good! Here we will introduce the layout of float website construction, which mainly uses the float attribute. It seems that it is helpful to know more about css in the future!

This original article is copyrighted by the webmaster www.i5768.com. For more information, see copyright. Thank you for your cooperation!