html 清除浮动的几种方式

清除浮动的几种方式?

答:1,父级 div 定义 height
原理:父级 div 手动定义height,就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、容易掌握 ,但
只适合高度固定的布局.
2,结尾处加空 div 标签 clear:both
原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮动,让父级 div 能自动获
取到高度 ,如果页面浮动布局多,就要增加很多空 div,让人感觉很不好 .
3,父级 div 定义 伪类:after 和zoom
/*清除浮动代码*/
.clearfix:after{
content:"";
display:block;
visibility:hidden;
height:0;
line-height:0;
clear:both;
}
.clearfix{zoom:1}
原理:IE8 以上和非 IE浏览器才支持:after,原理和方法 2 有点类似,zoom(IE 转有属性)可解决 ie6,ie7 浮动问题 ,
推荐使用,建议定义公共类,以减少 CSS 代码。
4,父级 div 定义 overflow:hidden
超出盒子部分会被隐藏,不推荐使用.
5. 双伪元素法:
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
时间: 2024-08-01 07:26:25

html 清除浮动的几种方式的相关文章

【css】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

清除浮动的四种方式及其原理理解

清除浮动的四种方式及其原理理解 本文介绍了四种清除浮动的方法,并尝试解释其原理.在理解了各种清除浮动的原理之后,你会发现,很多清除浮动的方法本质上其实是一样的.掌握这些原理,相信你可以根据场景和需求,灵活运用原则发展出不同的清除浮动的方法,而不再死记或拘泥于文中提到的方法. 一.为什么要清除浮动 在讲清除浮动的方法之前,我们先来了解一下为什么要清除浮动,清除浮动的目的是什么,即,要解决什么样的问题.来看一个浮动的例子(略去了文字内容): <div class="topDiv"&g

CSS 清除浮动的几种方式

第一种方式: 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid black; } .news img { float:left; } .news p { float:right; } <div class="news"> <img src="/img/news-pic.jgp" alt="my pic" /> &l

清除浮动的几种方式

最近来了个小徒弟,总是被浮动的盒子整蒙圈了,作为小师父的我就给他梳理一下: 浮动就是页面布局中是某些盒子添加了float:left 或float:right的类名或属性.其具有以下特点: 浮动的元素会脱离标准流: 浮动后的元素会覆盖标准流的元素: 浮动规则:浮动找浮动,不浮动找不浮动: 浮动显示的位置与原本不浮动的位置是对应的: 浮动的元素会影响下面的元素: 浮动的元素会改变显示方式(行内块级元素): a) 不管元素是行内元素还是块级元素都会在同一行显示: b) 浮动后的元素可以设置宽高: 例:

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

css清除浮动的两种方式(clearfix和clear)

最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0).现利用两例子来巩固下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父

css_清除浮动的4种方式

浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流,新的东西好用,兼容不太好.IE10以下不兼容flex布局. float布局会脱离文档流,对页面的布局造成影响,比如造成父级的高度坍塌等问题.清除浮动后,便不会影响文档流.下面介绍一下现在清除浮动的一些方式. 一.父级添加overflow: hidden: 子元素浮动了,会造成父元素的高度坍塌.只要给父元素添加overflow: hidden;属性,就可以解决浮动带来的影响. <ul cla

css清除浮动的几种方式,哪种最合适?

细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span,并设置浮动.具体代码如下所示: 由上图可以看出,在给span添加了float之后,父级元素div的高度就变成了0.我们有以下几种方式来解决这个问题 (1)给父级元素单独定义高度(height) 原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了