网页基础教程(九)--CSS浮动

  • 编辑时间: 2014-05-23
  • 浏览量: loading
  • 作者: 段亮

可能有些新手(小白)们不清楚什么是浮动,以及怎么才是清楚浮动。在CSS 有三种基本的定位机制:普通流、浮动和定位,上一节教程中,我们一起学习什么是定位,在这节教程中,我们一起学习什么是浮动,以及谈谈我对于浮动的理解。

在CSS浮动中,大家常见的左浮动(float:left)和右浮动(float:right),我们就以左浮动为案列,来跟大家一起讲解下:

左浮动:float:left 如下图:

   


以及浮动中出现的一常见些情况:如图


 


注:在第一图中说明了一个情况,当3个盒子,同时向左浮动,会被挤下来。(因为3个盒子的总宽度,超过了最外层的盒子的宽度,才会成此情况。

注:在第二图中说明一个情况,如果不是3个盒子的高度一样,同时向左进行浮动,就会产生以下情况。

清除浮动

好了,说了这多浮动案列,那么我也跟大家举一个没清除浮动的案列。如下图:


从此图上看,我的所有文字都向左浮动,而我的输入框,所在的盒子,我并没有给浮动,所以也会依次的向左跟紧。如想正常排序,须清除浮动。

清除浮动:代码style="clear:both"

总结:很多人网页布局发生错位,因为一般情况下是没有清除浮动,所以用了浮动后,一定要清除浮动,切记!以上纯属个人意见:有喜欢我博客的,可以在首页订阅图标中订阅

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 等待就是浪费青春
    2014-10-24 00:12:52发表

    写得很好!!

  • 小孩子
    2014-10-08 07:58:57发表

    怎么不更新了

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客