HTML中清除浮动的几种方法

清除float的常见几种方式：

清除浮动方法（1）在浮动元素后面使用一个空的自身清除浮动的元素。

例如

<div style="clear:both;"></div>

实例：清除容器中子元素的浮动，让父元素塌陷的高度恢复。

    <div class="content"><div class="div1 son"></div><div class="div2 son"></div></div> <div class="div-test"></div>

CSS代码：

     .content{width:100px;border:1px dotted red;}.div-test{width:100px;height:100px;border:1px dotted black;}.son{margin:5px;width:40px;height:40px;background:blue;float:left;}

在类为son的div左浮动的情况下，容器div高度塌陷。

在浮动元素后面使用一个空的自身清除浮动的元素。

    <div class="content"><div class="div1 son"></div><div class="div2 son"></div><!--清除浮动样式--><div style="clear:both;"></div></div> <div class="div-test"></div>

清除浮动样式后的效果：

清除浮动方法（2）给浮动元素的容器添加overflow:hidden;的属性和赋值。

在示例中需要给类为content的div元素添加overflow:hidden;其中设置zoom:1;为兼容IE6/7，触发hasLayout属性。

     .content{width:100px;border:1px dotted red;/*增加清除浮动的代码*/overflow:hidden;zoom:1;}.div-test{width:100px;height:100px;border:1px dotted black;}.son{margin:5px;width:40px;height:40px;background:blue;float:left;}

清除浮动方法（3）通过CSS3的：after伪元素。

通过：after伪元素设置样式来实现浮动清除，是时下最为流行的清除浮动方式。它实现的原理与方法（1）一样，效果也可以一样。但是借助:after微元素设置样式，不需要在HTML代码上额外增加元素。

CSS代码：

     .content{width:100px;border:1px dotted red;}.div-test{width:100px;height:100px;border:1px dotted black;}.son{margin:5px;width:40px;height:40px;background:blue;float:left;}
/*此处设置清除浮动代码*/.content:after{content:".";display:block;height:0;visibility:hidden;clear:both;}.content{zoom:1;}

这里设置zoom:1;同样是为兼容IE6/7，触发hasLayout属性。

清除浮动方法（4）设置容器元素高度height，只适合高度固定的布局。

清除浮动方法（5）容器元素也设置浮动。不推荐，会产生新的浮动问题。

HTML中清除浮动的几种方法相关推荐

html清除浮动有几种方法,HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如实例:清除容器中子元素的浮动,让父元素塌陷的高度恢复. CSS代码: .content{ wid ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
CSS清除浮动的几种方法
来源 | https://www.html.cn/web/css/19613.html 今天这篇文章给大家介绍一下CSS清除浮动的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮 ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
CSS的浮动及清除浮动的5种方法
浮动是布局的时用到的一种技术,能够方便我们进行布局. 1.浮动的设置:css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 2.浮动的原理:使当前元素脱离普通流,相当于 ...
css之“清除浮动的3种方法”
  <div ><ul& ...
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...

HTML中清除浮动的几种方法

HTML中清除浮动的几种方法相关推荐

最新文章

热门文章