css盒子的浮动(一)_html/css_WEB-ITnose-html教程-PHP中文网

css盒子的浮动(一)_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:52:15

原创

1574人浏览过

使用下面的代码作为演示例子。

<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; }