关于CSS清除浮动的几种方法

html-css012

关于CSS清除浮动的几种方法,第1张

清除浮动的方法主要一下几种：

(1).clear清除浮动（添加空div法）

在浮动元素下方添加空div,并给该元素写css样式 {clear:bothheight:0overflow:hidden}

(2).方法：给浮动元素父级设置高度

(3).方法：父级设置成inline-block

缺点：父级的margin左右auto失效，无法使用margin: 0 auto居中了

(4).给父级添加overflow:hidden 清浮动方法；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow: hidden

*zoom: 1

(5).万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.clear:after{content:''display:blockclear:bothheight:0overflow:hiddenvisibility:hidden}

.clear{zoom:1}

css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear，官方定义如下： 语法： clear : none | left | right | both 取值： none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear）对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。具体做法：要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

CSS 伪类 用于向某些选择器添加特殊的效果。(折角、抬头、箭头)

锚伪类 就是在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：已被访问状态，未被访问状态，鼠标悬停状态、活动状态(选定)。

a:link{color: #FF0000}/* 未访问的链接 */

a:visited{color: #00FF00}/* 已访问的链接 */

a:hover{color: #FF00FF}/* 鼠标移动到链接上 */(hover可用于所有元素，不只是链接)

a:active{color: #0000FF}/* 选定的链接 */

注:在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的a:active 必须被置于 a:hover 之后，才是有效的。链接可以设置字体颜色，字体大小，字体类型，背景颜色等等。

①选择<li>列表中的第一个元素并设置其样式：

li:first-child{background:yellow}

注：和②的区别是，无论是<ul>,还是<ol>，第一个元素样式都是一样

②设置每个<ul>的首个子元素，并设置其样式：

ul>:first-child{background:yellow}

注：只有<ul>中第一个元素改变

③没太理解(如下图)

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

一.加一个空元素，<div class="clear"></div>,然后在css里面写语句clear{clear:both}就可以可清除浮动。(之前7.20写过)

二.在css样式中添加语句overflow:hidden或overflow:auto可以清除浮动，例如为父元素设置容器宽高或设置 *zoom:1。(浮动元素又回到了容器层，把容器高度撑起)等方法

为什么要清除浮动，在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理。