举例HTML中几种清除浮动的方法,css清除浮动举例详说

css设计浮动属性的主要目的，是为了实现文本绕排图片的效果。

一.浮动

当浮动一张图片或者其他元素时，浏览器会将浮动元素往上方推，直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了，因为它就会占据父元素左上角的位置。

值得说明的是：css在呈现元素的时候都要将元素生成矩形盒子，这个矩形盒子实际上分为内容和边框组成的上 半部分，以及背景颜色和背景图片组成的下半部分，浮动只是浮动起半层，所以从浏览器中看到文本会绕开浮动的图片。

二.清除浮动之围住浮动元素的三种方法

例如html：

    

浮动很有趣

这里是底部的元素，存放一些文字。

css：section{border:1px solid blue;margin:0 0 10px 0;}

p{margin:0;}

footer{border: 1px solid red;}

上面代码效果图片

当给图片添加做浮动后：

section{border:1px solid blue;margin:0 0 10px 0;float: left;width: 100%;}

p{margin:0;}

footer{border: 1px solid red;clear: both;}

img{float: left;}

浮动section之后，不管其子元素是否浮动，它都会紧紧地包围住它的子元素。这里父元素宽度设置为100%；如果不设置，p还是会在图片下边。

方法三：添加非浮动的清除元素

    

浮动很有趣

这里是底部的元素，存放一些文字。