带你熟悉CSS浮动
一、概念理解
浮动：顾名思义先浮后动，浮动的对象会先漂浮起来，离开自己原来的位置（也就是所谓的脱离文档流），后动的意思是，它的后面的元素会向它原来的位置动起来。
二、注意事项
1.当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱的现象。（我们可以通过清除浮动的方式进行解决这个问题）
2.当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加。
3.清除浮动：就是可以去掉前面对象的浮动对后面对象的印象，是加给未浮动元素的。
语法：clear：none(默认值，允许两边都可以有浮动) both(左右两侧都不允许有浮动) left(左侧不允许有浮动) right(右侧不允许有浮动)。
清除浮动方法总结：
[1].额外标签法：W3C建议在父元素的末尾增加一个css为”clear:both”的元素，强迫容器适应它的高度以便装下所有浮动的元素。(缺点是会增加代码)。
[2].父元素使用overflow的方法:通过设置父元素的overflow的属性为hidden，是最简单的清除浮动的方法，但是如果子元素使用定位布局，将很难实现。
[3].利用伪对象after方法：定义一个类，使用伪对象after
控制浮动元素的影响，网上最流行的清除浮动的代码：
.clearFix{clear:both;display:block
;visibility:hidden;height:0;line-height:0;contect:””;} (.clearFix{zoom:1;}解决IE6/7兼容性问题)。4.另外一种解决浮动布局错乱问题的方式：给浮动元素的父元素加宽度。
三、使用方式
我们可以直接定义好浮动的CSS，然后应用给指定的需要浮动的元素就好了，方式非常简单易用。比如：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>浮动测试</title>
5 <style type="text/css">
6 .right{float:right;background-color:Red;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-right:20px;}
7 .left{float:left;background-color:Blue;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-left:20px;}
8 </style>
9 </head>
10 <body>
11 <div class="right"></div>
12 <div class="left"></div>
13 </body>
14 </html>运行效果如下：
就是这么简单，有什么不懂得可以加我QQ：1281616040细聊。。。。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-05-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读