html中如何消除自动浮动,清浮动 | 如何清除浮动

清浮动 | 如何清除元素浮动

HTML5学堂(码匠)：元素发生浮动，本身就会对文档产生影响，孕育而生的就是“清除浮动”。清浮动的方法有多种，可以使用空标签清浮动、br标签清浮动、overflow:hidden清浮动、改变元素展示类型、父级元素浮动等方法。

清除浮动后的效果：

未清除浮动后的效果：

实例代码(未清除浮动)：

梦幻雪冰

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

梦幻雪冰

独行冰海

解析：页面开发的时候可以为父级标签添加固定高度，但是有时希望内容能够撑开高度(比如内容不固定的时候)。对于不浮动的元素来说，它们是能够撑开外部div的高度的，但是一旦浮动，元素脱离文档流，父级div就相当于没有了内容(上面的例子中类名为main的高度为0了)。这时是没有办法实现内容撑开高度的。此时需要进行清除浮动对布局造成的一系列影响，所以叫清浮动。(不要误解成把浮动清除了，元素就没有浮动了，不是同一概念)。

欢迎沟通交流~HTML5学堂

清除浮动有很多种，如何进行选择清除浮动了？

今天给大家分享的是清浮动的具体代码实现，主要是帮助大家理解哪一种清除浮动比较好，辨析它们的优缺点而已。

一：空标签清浮动

梦幻雪冰

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

.clear {

clear: both;

/*消除默认行高的影响*/

height: 0;

}

梦幻雪冰

独行冰海

二：br标签清除浮动

梦幻雪冰

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

梦幻雪冰

独行冰海

欢迎沟通交流~HTML5学堂

三：父元素设置overflow：hidden

梦幻雪冰

.main {

overflow: hidden;

}

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

梦幻雪冰

独行冰海

四：父元素设置overflow：auto

梦幻雪冰

.main {

overflow: auto;

}

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

梦幻雪冰

独行冰海

五：父元素浮动

梦幻雪冰

.main {

float: left;

}

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

梦幻雪冰

独行冰海

效果：

注释：使得与父元素相邻的元素的布局会受到影响(影响到了类名为footer的元素)。

六：父元素设置display：table

梦幻雪冰

.main {

display: table;

}

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

梦幻雪冰

独行冰海

七：after 伪元素(不是伪类)

梦幻雪冰

.main div {

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

background: #fcf;

}

.footer {

width: 420px;

height: 100px;

background: red;

}

.clearfix:after {

clear:both;

display:block;

height:0;

content:"\200B";

}

.clearfix {

*zoom:1;

}

梦幻雪冰

独行冰海

相关文章推荐

欢迎沟通交流~HTML5学堂