<html>
<head>
<style>
.keepbj{ //通过class来设置
width:100px
height:50px
border:1px solid #f00
}
#div1{
float:left
width:40px
height:50xp
}
#div2{
float:lleft
width:30px
height:50px
}
#div3{
clear:both //div3就不受float的影响。
width:30px
height:30px
}
</style>
</head>
<body>
<div class='keepbj'>
<div id='div1'>我会在左边</div>
<div id='div2'>我会在右边</div>
</div>
<div id='div3'>
我不会受flaot的影响。
</div>
</body>
</html>
clear属性用来指定的浮动元件不允许浮动该哪一侧;它设置或返回元素相对于浮动对象的位置。而"clear: both"用于设置在左右两侧均不允许浮动元素。
原文地址: CSS规则"clear: both"有什么作用?
当不需要与指定元素相关的任何元素在左右浮动,并且仅在下面显示时,就可以使用该"clear: both"规则。该规则还表明没有其他元素占用左右两边的空间。
语法:
示例:
效果图:
浏览器支持:
● Google Chrome
● Internet Explorer
● Firefox
● Opera
● Safari
推荐阅读:
java基础教程
layui框架
go语言教程