html5和css篇有关浮动以及如何清除浮动_随笔

浮动和盒状模型、定位是CSS重点和难点。浮动，就是让div样式层块，向左或向右（靠）浮动。

Float:left 靠左浮动；Float:right 靠右浮动；clear:both清除浮动，简单举例如下：

CSS样式如下：

.box1{ float:left width:200px height:300px background:#f00}/* 设置div对象浮动靠左*/

.box2{ float:rightwidth:200px height:300pxbackground:#0f0}/* 设置div对象浮动靠右 */

.clear{ clear:both}/*清除浮动*/

html代码如下：

<div class="box1">布局靠左浮动</div>

<div class="box2">布局靠右浮动</div>

</div>

效果如下：

浮动利用好了，再结合相对定位，绝对定位，CSS排版基本上就能搞定了，细节的东西在实践中去体验吧。

清除元素浮动有多种方法，通常会使用到clear属性。

如果是清除浮动元素对兄弟级元素的影响，则在浮动元素之后的第一个兄弟级元素上设置clear属性即可。

如果是清除浮动元素对父级元素的影响，则有多种方法，比较常见的方式有两种，一种是在父级元素当中添加一个空标签，然后为空标签设置clear: both；另一种方法是为父级元素添加伪元素，用伪元素清除浮动，例如：

<style>

.main div {

float: left

width: 200px

height: 200px

margin-right: 20px

background: #fcf

}

.main:after {

clear:both

display:block

height:0

content:"\200B"

}

.main {

*zoom:1

}

</style>

</head>

<body>

</div>

更多清除浮动的方法，可以查看文章《如何清除元素的浮动》

欢迎分享，转载请注明来源：内存溢出

html5和css篇有关浮动以及如何清除浮动