CSS浮动专题!

在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兼容问题
        }

以上就是我给初学者总结的css浮动专题

　　

　　

　　

 

 

　　

转载于:https://www.cnblogs.com/wccc/p/6749692.html