DIV CSS block box floating design_html/css_WEB-ITnose-HTML Tutorial-php.cn

DIV CSS block box floating design_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:01:09

Original

1154 people have browsed it

During page layout, absolute positioning can be used to achieve this, but since the positions of other blocks will not change accordingly when a certain block frame is adjusted, this is not the preferred method of layout. But with a floating block box, it can be moved left or right until its outer edge touches the border of its containing block or the border of another floating block. And because the float is not in the document's normal flow, the block box in the document's normal flow behaves as if the float does not exist.

This article summarizes several simple examples of floating block boxes:

1. Sorting of non-floating block boxes

<html>	<head>		<title>DIV+CSS</title>		<style>			body{					margin:0px;			}			div{					width:200px;					height:200px;					font-size:40px;					text-align:center;			}			#one{				background:red;			}			#two{				background:green;			}			#three{				background:yellow;			}		</style>	</head>	<body>			<div id="one">				框（1）			</div>			<div id="two">				框（2）			</div>			<div id="three">				框（3）			</div>	</body></html>

Copy after login

2. Float the first block box to the right

Redefine the #one selector, just add one line of code:

			#one{				float:right;				background:red;			}

Copy after login

The running results are as follows:

3. Set the first one to float to the left

In order for everyone to see the effect, the sizes of the three blocks must be adjusted, so I re-wrote the code directly.

<html>	<head>		<title>DIV+CSS</title>		<style>			body{					margin:0px;			}			div{					height:200px;					font-size:40px;					text-align:center;			}			#one{				width:200px;				float:left;				background:red;			}			#two{				width:240px;				background:green;			}			#three{				width:200px;				background:yellow;			}		</style>	</head>	<body>			<div id="one">				框（1）			</div>			<div id="two">				框（2）			</div>			<div id="three">				框（3）			</div>	</body></html>

Copy after login

Running results:

It is not difficult to see that box (2) is covered by box (1). Only the extra 40px of width is visible. Because after the frame (1) is floated, it does not belong to the scope of the document flow, which is equivalent to its original position being vacant, so the frame (2) is naturally filled in.

4. Set all three boxes to float to the left

This only requires adding a line of code to the div{ } in Example 1:

float:left;

Copy after login

Operation effect:

5. Set three boxes to the left (Insufficient space)

You only need to modify the sizes of the three blocks accordingly

<html>	<head>		<title>DIV+CSS</title>		<style>			body{				margin:0px;			}			div{				float:left;									height:200px;				font-size:40px;				text-align:center;			}			#one{				width:500px;				background-color:red;			}			#two{				width:400px;				background:green;			}			#three{				width:600px;				background:yellow;			}		</style>	</head>	<body>			<div id="one">				框（1）			</div>			<div id="two">				框（2）			</div>			<div id="three">				框（3）			</div>	</body></html>

Copy after login

Run results:

If there is insufficient space , the block automatically moves down

6. The third block is "stuck" by the first one

Block 3 is not on top There is enough space. When moving down, the extra part of block 1 will automatically block the movement of block 3.

Finally, let’s introduce another attribute: clear (clear attribute, specifying whether an element is allowed to have elements floating next to it)

clear:none;clear:left;clear:right;clear:both;

Copy after login

There are several types in total values, respectively corresponding to different cleaning effects. By using this attribute flexibly, many problems can be easily solved.