揭开浮动布局的秘密

1,浮动(float)

float属性有4个可选属性,none,left,right,inherit

none为默认值,即不可浮动。

inherit表示继承父元素的float值。

(1)对于块级元素来说,在不设长度的时候,默认的宽度是100%,一旦设置浮动,宽度就会根据内容进行自动调整。如图:



设置浮动


没有设置浮动


(2)设置浮动,不仅会在Y轴进行浮动,而且在Z轴也会浮动,譬如,将子模块设置浮动后,父元素的高度也会变成0

(3)虽然浮动脱离了文档流,但是里面的内容仍然占据着空间,看看下边的例子,跟我们想的是不是不一样。normal没有被float覆盖


例子代码


显示结果


2,清除浮动

(1)clear 可选 left,right,both

         定义了元素的哪一侧不能出现浮动

(2)对父类使用:after伪类

       .clearfix :after{

         display:block;

          clear:both;

         }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,538评论 5 15
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,696评论 1 45
  • 突然发现自己无知的领域好多好多,都是用百度来应对生活中的问题,煲汤只做过一种,前任留下的技能太少,炒菜从未尝试别的...
    橙大帅的普通人生阅读 244评论 0 1
  • 觉察日记 1.事件/行为:下午先生带着女儿在店里,先生陪客户打扑克,女儿和我撒娇 2.感受:开心,幸福,快乐,被爱...
    我是爱和自由阅读 91评论 0 0