网页基础教程(九)--CSS浮动
- 编辑时间: 2014-05-23 10:32:00
- 浏览量:
- 作者:
可能有些新手(小白)们不清楚什么是浮动,以及怎么才是清楚浮动。在CSS
有三种基本的定位机制:普通流、浮动和定位,上一节教程中,我们一起学习什么是定位,在这节教程中,我们一起学习什么是浮动,以及谈谈我对于浮动的理解。
在CSS浮动中,大家常见的左浮动(float:left)和右浮动(float:right),我们就以左浮动为案列,来跟大家一起讲解下:
左浮动:float:left 如下图:
以及浮动中出现的一常见些情况:如图
注:在第一图中说明了一个情况,当3个盒子,同时向左浮动,会被挤下来。(因为3个盒子的总宽度,超过了最外层的盒子的宽度,才会成此情况。
注:在第二图中说明一个情况,如果不是3个盒子的高度一样,同时向左进行浮动,就会产生以下情况。
清除浮动
好了,说了这多浮动案列,那么我也跟大家举一个没清除浮动的案列。如下图:
从此图上看,我的所有文字都向左浮动,而我的输入框,所在的盒子,我并没有给浮动,所以也会依次的向左跟紧。如想正常排序,须清除浮动。
清除浮动:代码style="clear:both"
总结:很多人网页布局发生错位,因为一般情况下是没有清除浮动,所以用了浮动后,一定要清除浮动,切记!
写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!
微信打赏
支付宝打赏