html消除浮动的作用,概述页面中浮动与清除浮动

一、float：主要目的是为了实现文本绕排图片的效果。

也成了创建多栏布局最简单的方式。

文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容

【1】文本绕排图片

P {margin: 0; border: solid 1px;}

img {float: left;}

【2】创建多栏布局

P {margin: 0; border: solid 1px; width: 200px; float: left;}

img {float: left;}

二、浮动元素脱离了文档流，其父元素也看不到他了，因为也不会包围他，就会出现子元素有高度，而父元素不会被撑起，这时候并非我们想要，

下面有三种方法解决，请审时度势合理应用：

display: block ;

height: 0

visibility: hidden;

clear : both

}

三、没有父元素时，如何清除(img p 作为一组 ，没有父元素)

　　文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容

　　文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容

　　文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容

.clearfix: after {

content: "";

display: block ;

height: 0

visibility: hidden;

clear : both

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！