CSS浮动专题!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

代码示例:

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