html取消浮动代码

HTML中把一个元素设为浮动元素，就可以让它脱离文档流，沿着容器的左侧或者右侧浮动。而取消浮动也非常简单，只需要在CSS样式表中为该元素加上“clear”或“overflow”属性就可以。 clear属性用来指定该元素下面的元素应该如何布局，常见的取值有“left”、“right”、“both”和“none”。例如，当我们设置clear:left时，就可以保证该元素的左侧不会再出现浮动元素，从而实现取消浮动的效果。 另外，可以使用overflow属性来让父元素“包含浮动”，从而也能实现取消浮动的效果。当我们设置overflow:hidden时，就可以让父元素自动适应浮动元素的高度，从而实现取消浮动的效果。 下面是一个示例代码，演示了如何利用clear和overflow属性来取消浮动：

p {
  float: left;
} 

.clearfix {
  clear: both;
}

.overflow {
  overflow: hidden;
}

以上代码中，我们设置了一个左浮动的段落元素。接着我们定义了两个类名，一个是clearfix，一个是overflow。在使用clearfix类名的时候，我们把该元素设为“清除浮动”，从而可以让它下面的元素正常布局，不受到浮动元素的影响。而在使用overflow类名的时候，我们让该元素继承父元素的属性，从而能够让整个容器“包含浮动”，也达到了取消浮动的效果。