清醒时做事，糊涂时读书，大怒时睡觉，无聊时关注图老师为大家准备的精彩内容。下面为大家推荐css实例教程:理解Float的含义，无聊中的都看过来。
【 tulaoshi.com - Web开发 】
课程关键词：浮动
页面效果如下：
要求：
1）两个方块，一个红色#900，一个蓝色#009；
2）红色方块宽度和高度均为200像素，蓝色方块
宽度为300像素，高度为200像素；
3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；
大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较霸道的一点，（）为了消除这种霸权，让红色和蓝色方块都处在一行，如图
此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上float:left;，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：
#redBlock{现在再看看，是不是IE6和FF显示一样了呢~
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
}
来源:http://www.tulaoshi.com/n/20160220/1631589.html
看过《css实例教程:理解Float的含义》的人还看了以下文章 更多>>
