dic取消浮动

来源：互联网发布：开源软件风险编辑：程序博客网时间：2024/05/23 15:49

当有多个div并且要求其并排显示时，需要设置其float属性。则div是浮动显示的，不添加浮动属性的DIV是会添加到浮动的DIV下如下：

代码：

<html><head><meta charset="utf-8"/><title>第6课-浮动布局</title><style type="text/css">#rside{height:100px;background: green;width: 200px;float: right;}#lside{height: 100px;background: blue;width: 200px;float: left;}#common{height: 200px;width:400px;background: #FFFF00;}</style></head><body><div id="rside">我是右</div><div id="lside">我是左</div><div id="common">我是普通</div></body></html>

显示效果如下：

现希望普通的这个DIV不被左浮动的DIV覆盖，可以对普通的这个DIV添加clear属性，禁止该DIV上有浮动的DIV

代码：

<html><head><meta charset="utf-8"/><title>第6课-浮动布局</title><style type="text/css">#rside{height:100px;background: green;width: 200px;float: right;}#lside{height: 100px;background: blue;width: 200px;float: left;}#common{height: 200px;width:400px;background: #FFFF00;clear: left;}</style></head><body><div id="rside">我是右</div><div id="lside">我是左</div><div id="common">我是普通</div></body></html>

显示效果如下：

clear属性的值有三个：left，right，和both。left表示禁止其上有左浮动的DIV，right表示禁止其上有右浮动的DIV。both表示禁止其上有任何浮动的DIV。

0 0