Home >Web Front-end >HTML Tutorial >Floating of css box (1)_html/css_WEB-ITnose
Floating of css box (1)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:151282browse
Use the code below as a demonstration example.
<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”>body{ margin:15px; font-family:Arial; font-size:12px; } .father{ background-color:#ffff99; border:1px solid #111111; padding:5px; } .father div{ background-color:;margin:15px; padding:10px; } .father p{ border:1px dashed #111111; background-color::#ff90ba; } .son1{ /*这里设置son1的浮动方式*/border:1px dashed #111111; } .son2{ background-color:#6FF; border:1px solid #111111;} .son3{ background-color:#0F6; border:1px dashed #111111; } </style> </head> <body> <div class=”father”> <div class=”son1″>Box-1</div> <div class=”son2″>Box-2</div> <div class=”son3″>Box-3</div> <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p> </div> </body> </html> Set the son1 box to float to the left, the code is as follows
.son1{
/*Here Set the floating method of son1*/
float:left;
border:1px dashed #111111; }
As you can see from the picture below, the background of box=2 and the border completely occupy the position of box-1. At this time, the width of box-1 is no longer stretched, but the minimum width that can accommodate the content. Now that box-1 has been separated from the standard flow, box-2 in the standard flow will push up to the original position of box-1, and the text will be arranged around box-1.
After setting the float attribute of box-2 to left, you can see from the background color that box-3 is running up, and the space between box-1 and box-2 is It is composed of the margins of the two.
The effect after setting the float attribute of box-3 to left is as follows. The text will be arranged around the floating box.