html清除浮动有几种方法,HTML中清除浮动的几种方法

清除float的常见几种方式：

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

例如

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

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高度塌陷。

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

清除浮动样式后的效果：

清除浮动后的效果

清除浮动方法(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中清除浮动的几种方法相关推荐

android gps导航省电,一种GPS导航中省电的系统和方法与流程
一种gps导航中省电的系统和方法,应用于通过gps(或者类似的北斗.伽利略)导航的领域. 背景技术: 在移动设备领域(手机.车载导航等),通过卫星导航应用非常普遍,几乎全部的手机,大部分的汽车,自身都 ...
几种在NCBI中查询获取目的基因序列的方法
几种在NCBI中查询获取目的基因序列的方法在NCBI中,如何查询并下载获得某物种的某特定功能的基因序列,相信对于看到此篇的大部分同学来说都不陌生了.想到对于刚开始接触生信的同学们来说,也许尚不能很熟 ...
运行tomcat时，解析 HTTP 请求 header 错误 Note: further occurrences of HTTP 在方法名称中发现无效的字符串, HTTP 方法名必须是有效的符号
启动成功后报错 org.apache.coyote.http11.Http11Processor.service 解析 HTTP 请求 header 错误 Note: further occurren ...
java中无效字符串,ava.lang.IllegalArgumentException: 在方法名称中发现无效的字符串, HTTP 方法名必须是有效的符号...
问题: 信息: 解析 HTTP 请求 header 错误注意:HTTP请求解析错误的进一步发生将记录在DEBUG级别. java.lang.IllegalArgumentException: 在方法名 ...
信息: 解析 HTTP 请求 header 错误 java.lang.IllegalArgumentException: 在方法名称中发现无效的字符串, HTTP 方法名必须是有效的符号.
信息: 解析 HTTP 请求 header 错误 Note: further occurrences of HTTP request parsing errors will be logged at ...
c语言清除键盘缓冲区函数,C语言程序中清除键盘缓冲区的方法
第四期2006年12月益阳职业技术学院学报 JournalofYiyangVocationalandTechnicalCollegeNO．4Dec．2006 C语言程序中清除键盘缓冲区的方法杨长虹 ...
figma设计_一种在Figma中跟踪设计迭代的简单方法
figma设计 As designers, telling a good story is always part of the job. A great story engages the clie ...
android item三种,Android RecyclerView中的ItemDecoration的几种绘制方法
如题,我们使用recyclerview的时候,如果没有设置显示条目的margin,或者padding的话,是没有分割线效果的. 那么除去使用margin或padding,其余的方法是用itemdeco ...
java 终止方法_Java中终止线程的三种方法
Java中终止线程的三种方法 Thread.stop, Thread.suspend, Thread.resume 和Runtime.runFinalizersOnExit 这些终止线程运行的方法已经 ...

html清除浮动有几种方法,HTML中清除浮动的几种方法

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

最新文章

热门文章