2020-11-25 09:48发布
第一种方法添加新元素，使用clear:both;这种方式优点就是代码少，容易理解，浏览器几乎都支持，出现的问题比较少，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化。虽然这是常用的清除浮动方式，但不建议使用
第二种方式：父容器使用overflow: auto;使用这种方法，必须定义width或者zoom,而且不能设置高度height，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏
通过隔墙法，我们可以很方便的清楚浮动。下面我们再来介绍一种清楚浮动的方法：内墙法.
仍然是同样的例子。内墙法和隔墙法很相似，区别在于将这堵墙dis放在div1里面。通过设置这堵墙的clear：both来清除浮动，同样设置该div的height：10px,使div1与div2之间出现间距。
定义三个div：父容器container、子容器box1、box2
添加新元素，使用clear:both;
父容器使用overflow: auto;
父容器使用伪类:after跟zoom
三种方式可以试试
一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...
1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流，提高半个层级，不能完全覆盖下面元素（不能覆盖图片文字）定位脱离标准文档流，提升一个层级，可以完全覆盖下面元素及其内容...
绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...
定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
BFC 是 Block Formatting Context（块级格式化上下文）的缩写，它是为了解决如下问题：浮动定位外边距合并清除浮动自适应多栏布局
一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，p...
float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边...
如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在...
1、 元素类型的转换（display属性）Display属性属性值：BlockInlineNone大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；内联元素...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 慢半拍 的问题《【Web前端基础】css如何清除浮动》','http://www.shouhuola.com/q-31328.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
第一种方法添加新元素，使用clear:both;这种方式优点就是代码少，容易理解，浏览器几乎都支持，出现的问题比较少，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化。虽然这是常用的清除浮动方式，但不建议使用
第二种方式：父容器使用overflow: auto;使用这种方法，必须定义width或者zoom,而且不能设置高度height，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏
通过隔墙法，我们可以很方便的清楚浮动。下面我们再来介绍一种清楚浮动的方法：内墙法.
仍然是同样的例子。内墙法和隔墙法很相似，区别在于将这堵墙dis放在div1里面。通过设置这堵墙的clear：both来清除浮动，同样设置该div的height：10px,使div1与div2之间出现间距。
清除浮动
定义三个div：父容器container、子容器box1、box2
添加新元素，使用clear:both;
父容器使用overflow: auto;
父容器使用伪类:after跟zoom
三种方式可以试试
相关问题推荐
一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...
1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流，提高半个层级，不能完全覆盖下面元素（不能覆盖图片文字）定位脱离标准文档流，提升一个层级，可以完全覆盖下面元素及其内容...
绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...
定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
BFC 是 Block Formatting Context（块级格式化上下文）的缩写，它是为了解决如下问题：浮动定位外边距合并清除浮动自适应多栏布局
一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，p...
float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边...
如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在...
1、 元素类型的转换（display属性）Display属性属性值：BlockInlineNone大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；内联元素...