CSS浮动专题!

最新推荐文章于 2022-01-27 19:28:20 发布

转载最新推荐文章于 2022-01-27 19:28:20 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wccc/p/6749692.html

在css中，浮动问题可能是很多刚入门的小白比较头疼的问题。

1，首先先来介绍一下两种浮动类型:左浮动和右浮动

　　1) float:left;左浮动,后面的内容会流向对象的右侧

　　2) float:right; 右浮动,后面的内容会流向对象的左侧

　　举例来说，三个块级元素,第一个设置浮动后，第一个块级元素将不再占用块级位置，第二个将会取代第一个的位置

2，由于浮动会使浮动对象后面的布局错乱，因此引入了清除浮动: clear:both;

注意:下面是设置浮动后常见的几个问题

　　(一)设置浮动后在一行的两个块级元素会因为浏览器窗口大小的改变而改变其原来的位置

　　　　解决方法:将两个块级元素放在同一个父级盒子里

　　(二)当两个块级元素都设置了浮动并且设置了 margin:0 auto;(水平居中)，结果并不是居中效果

　　　　解决方法:将两个块级元素放在同一个父级盒子里

　　(三)两个设置了浮动的块级元素的父级元素在没有指定高度时，将不会自动补齐高度

　　　　解决方法1:给这两个块级元素下面增加一个空的块级标签(设置clear:both;)来消除浮动对父级元素的影响

　　　　解决方法2:给父级元素增加 overFlow:hidden; 属性 (注意:如果子元素使用了定位布局就很难实现)

　　　　解决方法3:利用给父级元素添加伪元素after方法

　　　　　　　　　代码示例:

.clearFix:after{
                    clear:both;
                    display:block;
                    visibility:hidden;
                    height:0;
                    line-height:0;
                    content:".";
              }
.clearFix{
             zoom:1;//解决IE6/7兼容问题
        }