Heim > Artikel > Web-Frontend > css盒子的浮动(一)_html/css_WEB-ITnose
css盒子的浮动(一)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:151265Durchsuche
使用下面的代码作为演示例子。
<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> 将son1盒子设置为向左浮动，代码如下
.son1{
/*这里设置son1的浮动方式*/
float:left;
border:1px dashed #111111; }
从下图中可以看出，box=2的背景和边框完全占据了box-1的位置，此时box-1的宽度不再伸展，而是能容纳下内容的最小宽度。现在box-1已经脱离标准流，标准流中的box-2会顶到原来box-1的位置，而文字会绕着box-1排列。
将box-2的float属性设置为left后，从背景色可以看出box-3就跑上来了，box-1和box-2之间的空白是由二者的margin构成的。
将box-3的float属性设置为left后效果如下，文字会围绕浮动的盒子排列。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：4、网页制作Dreamweaver（样式表CSS）_html/css_WEB-ITnoseNächster Artikel：请教大神，怎么实现商品分类功能_html/css_WEB-ITnose