首页 >web前端 >css教程 >详解css中的浮动与三种清除浮动的方法

详解css中的浮动与三种清除浮动的方法

高洛峰
高洛峰原创
2017-03-15 11:56:161403浏览

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 

1, 外边距的合并现象:

如果两个p上下排序,给上面一个p设置margin-bottom,给下面一个p设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个。

 对于这种现象一般不用处理。

2,margin塌陷现象:

如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移。

解决方案:

1.0给大盒子加一个边框border属性。

2.0给大盒子设置一个overflow属性。

3.0使用浮动。

 

补充:overflow的常用属性如下: 

visible

:默认值。内容不会被修剪,会呈现在元素框之外。

Hidden

内容会被修剪,并且其余内容是不可见的。

Scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

Auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。


浮动

浮动是css中的一个重点,为什么要使用浮动?

是为了解决一行中显示多个盒子的问题。

float:left;      float :right

浮动有三个特点:

1,脱离标准流,不占位置。

2,会改变元素的默认显示方式display为block块级元素。

3, 浮动的元素只会覆盖后边的块级元素,不影响前边的块级元素。

 什么是标准流?

就是浏览器默认摆放盒子的标准。

标准流的特点:

1,块级元素从上到下,独占一行。

2,行内元素,行内块级元素从左到右在一行中显示。

3,占位置。

浮动的影响以及清除浮动的三种办法

浮动对页面的影响:

如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。

Clear:both

1,使用额外标签法:

在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响。

.clearfix{

                    clear: both;

           }

 

a.内部标签:会将这个浮动盒子的父盒子高度重新撑开

b.外部标签:会将这个浮动盒子的影响清除,但是不会撑开父盒子。

注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

 

2,使用overflow属性来清除浮动:

先找到浮动盒子的父元素,再在父元素中添加一个属性,就是清除这个父元素中的子元素浮动对页面的影响。

overflow: hidden;

 

3,使用伪元素来清除浮动:

.clearfix:after {

                    content: "";//添加内容为空

                    height: 0;//内容高度为0

                    line-height: 0;//内容文本的高度为0

                    display: block;//将文本设置为块级元素

                    clear: both;//清除浮动

                    visibility: hidden;//将元素隐藏

           }

           .clearfix {

                    zoom: 1;/*为了兼容ie6*/

           }

   

visible

:默认值。内容不会被修剪,会呈现在元素框之外。

Hidden

内容会被修剪,并且其余内容是不可见的。

Scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

Auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

以上是详解css中的浮动与三种清除浮动的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn