在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浮动专题