让我们向您解释如何清除html中的浮动。相信朋友们也应该密切关注这个话题。现在，我们来谈谈如何为朋友清除html中的浮动。边肖还收集了关于如何清除html中的浮动的相关信息。我希望你看到后会喜欢。

清除浮动的Html方法：1。给出浮动元素的父元素高度和宽度；2.父元素加[溢出：隐藏]；3.在兄弟元素中添加一个[clear:both]；4.使用伪类移除浮动。

本教程的操作环境：windows7系统，html5版本，DELL G3电脑。

清除浮动的Html方法：

方法1:(给出父元素的宽度和高度)

因为浮动元素不占用文档流，所以说紫色div消失是因为内容没有打开高度，而不是不再存在。因此，第一种方法是我们给出紫色div的高度和宽度，也就是浮动元素的父高度和宽度，这样它就可以自己显示了。

Css代码：

# div1 { width:600px高度：300 px；背景：中等紫色；}

#左{ width: 200px高度： 100像素；背景：天蓝色；}

#右{ width: 250px高度： 150像素；背景：粉色；}渲染：

方法2:父元素加溢出：隐藏

很多人会说，我们不想固定紫色div的宽度和高度，但是我们希望它的内容能够传播开来。然后我们可以将overflow:hidden添加到父元素的css中，也就是紫色div。以便显示紫色的div。

Css代码：

#div1{background:中等紫色；Overflow:hidden}渲染

方法3:向兄弟元素添加一个clear:both。

除了对父元素进行更改，我们还可以对子元素的兄弟元素进行更改，从而达到去除浮动的效果。

Html代码：

div id='div1 '

div id='left'/div

div id='右'/div

div id='div2'/div

/div渲染：

第四种方法：使用伪类来移除浮动。

用伪类清除浮动时使用after，并添加内容：''添加内容与否，但一定要添加display:block；还要写清楚：两者兼顾；

Css代码：

# div1:after在{ content : }之后；clear:两者；display:块；}渲染：

相关学习建议：html视频教程

以上就是如何清除html中浮动的细节。请多关注php中文网站的其他相关文章！

来源：php中文网站