1 使用空标签清除浮动 这种方法通过在浮动元素之后添加一个带有clearboth属性的空标签来清除浮动示例代码ltbr style=quotclearbothquot 或者 ltdiv style=quotclearbothquotltdiv2 使用overflow属性 通过给包含浮动元素的父容器设置overflowauto或overflowhidden属性，可以清除浮动这种方法避免了增加。

HTML清除浮动的方法步骤如下1首先，制作一个简单的HTML页面，找到父级元素，将父级元素添加上边框2然后，将父级元素添加上边框后，发现父级元素没有被子元素的高度所撑开，保持标签的高度3在HTML页面上，将最后一个浮动元素的后面添加上div，设置其类型为clearboth4设置完成后，将浮动。

这代码本身没有问题楼主所说的清除浮动，是要实现什么效果呢楼主希望的是这样的效果lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot lthead ltmeta。

通过设置CSS的float属性为left或right，可以控制元素向左浮动还是向右浮动这使得元素能够按照设计需求，在水平方向上进行定位浮动元素对其他元素的影响浮动元素不会影响它下面的非浮动元素的位置，但会影响与其并排的其他元素这是因为浮动元素已经脱离了常规文档流，不再占据原来的空间清除浮动由于。

给浮动元素的父容器添加 overflowhidden 或 overflowauto 或者 overflow scroll ，也可以清除浮动在浮动的元素后面同一层级，增加一个新标签，比如 ltdiv class=quotclearquotltdiv ，然后在这个空元素里面设置 clear both 清除浮动当然这样的话，就会增加无用的标签，使得html变得冗余。

Floatleft 靠左浮动Floatright 靠右浮动clearboth清除浮动，简单举例如下CSS样式如下box1 floatleft width200px height300px background#f00* 设置div对象浮动靠左* box2 floatrightwidth200px height300pxbackground#0f0* 设置div对象浮动靠右 * cle。

清除浮动，顾名思义就是clearboth，这的确是一种方法，但是要确定我们的clearboth是应用在哪里47 我们可以在html页面上，最后一个浮动元素的后面，添加一个div，并设置其style为clearboth57 我们还可以为浮动的元素的父级元素添加伪类，*aftercontentquotquot displayblock clearboth。

方法2清除浮动的最大问题是 divcontent 不能设置 margintop 无效于是就有了外墙隔离法图片上传失败imaged292db3于是就有了新的演变 内墙元素隔离法把元素放在外面， 影响 HTML 结构于是有人干脆把”隔离元素”放在内部图片上传失败imagee6f2793。

1利用clear样式清除浮动，在父元素的最后添加一个空白的div，它可以撑开父元素的高度，然后对其清除浮动2利用after伪类可以通过after伪类去除浮光点。

在实际开发中，清除浮动最常用的方法是使用clearboth例如，当一个容器中包含多个浮动元素，而容器本身需要保持清晰的边界时，就需要应用clearboth来清除浮动以下是一个示例HTML 代码创建一个宽度为500px的盒子，内部包含两个宽度为200px的浮动盒子一个浮动到右边，一个浮动到左边盒子本身拥有。

清除浮动是为了恢复被浮动元素影响的标准流布局，通常因为浮动元素导致父元素高度塌陷解决方法包括直接设置父元素高度使用额外标签单伪元素清除法以及双伪元素清除法，其中给父元素设置overflow hidden是简便的方法清除浮动是为了保持网页整体布局的稳定性和协调性以上内容总结了HTMLJS前端中CSS布局。