时间：2023-09-27 19:30:01 | 来源：网站运营
时间：2023-09-27 19:30:01 来源：网站运营
轻松学：网页设计13-网页布局盒子浮动：在网页中，文档流是以默认的方向即从上到下、从左往右流动的，，采用这种默认的文档流搭建的结构看起来死板、不美观，达不到预期的效果。通过引入CSS中的浮动样式可以进行更多样化的布局。| 属性值 | 描述 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
在线咨询
.father{ /*定义父元素的样式*/ background:#ccc; border:1px dashed #999;}.box01,.box02,.box03{ /*定义box01、box02、box03三个盒子的样式*/ height:50px; line-height:50px; background:#FF9; border:1px solid #F33; margin:15px; padding:0px 10px; float:left; /*定义box01、box02、box03左浮动*/}p{ /*定义段落文本的样式*/ background:#FCF; border:1px dashed #F33; margin:15px; padding:0px 10px; clear:left; /*清除左浮动*/ }<!doctype html><html><head><meta charset="utf-8"><title>空标记清除浮动</title><style type="text/css">.father{ /*没有给父元素定义高度*/ background:#ccc; border:1px dashed #999; }.box01,.box02,.box03{ height:50px; line-height:50px; background:#f9c; border:1px dashed #999; margin:15px; padding:0px 10px; float:left; /*定义box01、box02、box03三个盒子左浮动*/}.box04{ clear:both;} /*对空标记应用clear:both;*/</style></head> <body><div class="father"> <div class="box01">box01</div> <div class="box02">box02</div> <div class="box03">box03</div> <div class="box04"></div> <!--在浮动元素后添加空标记--></div></body></html>clear属性用于设置html组件的左，右是否允许出现“浮动”组件。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>visibility属性示例</title> <style type="text/css"> h1.hidden { visibility: hidden; } h2.display { display: none; } </style> </head> <body> <h1>这是一个可见标题</h1> <h1 class="hidden">这是一个隐藏标题</h1> <p>注意, 本例中的visibility: hidden隐藏标题仍然占用空间。</p> <h1 class="display">这个标题不被保留空间</h2> <p>注意, 本例中的display: none不显示标题不占用空间。</p> </body></html>关键词：布局,盒子,浮动,设计
