html 清除float,css中如何清除float

css中清除float的方法是，为父元素设置【overflow:auto】。设置之后，内容元素会被修剪，超出元素将不可见。我们还可以通过增加空标签，或者使用【:after】伪元素来清除float。

本文操作环境：windows10系统、css 3、thinkpad t480电脑。

我们先来说下清除浮动的目的，清除浮动并不是清理自身的浮动的效果，而是清理上面接触到的浮动元素的浮动，使浮动元素后面的元素不接受它们的浮动，按照正常的元素流进行布局。

下面我们就来为大家介绍下清除浮动的三种方式：

第一种方式：

增加一个空的标签(div 或 br等都行)，通过clear：both语句消除float对后面元素的影响。

.main{float:left;}

.side{float:right;}

.footer

缺点：需要加很多无意义的标签，对后期维护不利。如果是小程序，那没关系，但如果是大工程，还是慎用。

第二种方式：使用:after 伪元素.clearIt { zoom:1; }

.clearIt:before;

/*加上before可以防止浏览器顶部的空白崩溃(就是上一个div的margin-bottom和下边的margin-top会发生叠加)*/

.clearIt:after {

content:".";

display:block;

height:0;

visibility:hidden;

clear:both;

}

display:block 使生成的元素以块级元素显示,占满剩余空间;

height:0 避免生成内容破坏原有布局的高度。

visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

zoom：1 触发IE hasLayout。

第三种方式：

在父元素设置 overflow：auto

.main{float:left;}

.side{float:right;}

.footer

当父元素设置了overflow：auto之后，内容元素会被修剪，超出元素不可见。

这种方式的优点是不存在结构和语义化问题，代码量极少。但缺点也很严重，当内容增多时容易因为不会自动换行而导致内容被隐藏掉，无法显示需要溢出的元素。

其实只有clear：both是用来消除float的影响。其它的几种方式都是通过隐藏内容来达到自己的目的。

相关学习视频分享：css视频教程

html 清除float,css中如何清除float相关推荐

CSS中clear“清除浮动”的作用原理
CSS中clear"清除浮动"的作用原理之前看视频中,总听到说clear不是清除浮动,而是消除浮动带来的影响,纠结了一天,没有理解,现在终于能明白这是什么意思了. 下面直接用代码 ...
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...
CSS中的浮动float
1.1 什么是浮动? CSS 的 float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. float(浮动),往往是用于图像水平排列,或让列表水平排列,浮动在布局中非常有用. 1.2 ...
div+css中设置了float属性后如何让外层的高度随着内层的高度大小自动调整
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...
CSS中关于清除浮动的问题
1.采用:after的方法清除浮动优点:避免在html里插入多余的标签详情:http://www.positioniseverything.net/easyclearing.html 整理成一个通 ...
详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
CSS基础——浮动（float）【学习笔记】
1. 浮动(float) 1.1 CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位,其中: 普 ...
CSS——CSS浮动与清除浮动
文章目录浮动普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮漏特案例:体会浮动现在就可以用float实现一些基本页面布局了链接清除浮 ...
html文本设置float,css怎么float（浮动）？
在css中,浮动是一种使元素脱离文档流的方法,会使元素向左或向右移动,其周围的元素也会重新排列.Float(浮动),往往是用于图像,但它在布局时一样非常有用. 浮动是一种非常有用的布局方式,它能够改变 ...

html 清除float,css中如何清除float

html 清除float,css中如何清除float相关推荐

最新文章

热门文章