CSS中的float

float浮动

还记得很久之前自己第一次用float元素出现的效果……因为不会控制界面显示惨不忍睹,还一直搞不清楚为什么……当时是直接改成用绝对定位换掉了float,但好像出了问题我基本都放到一边没再继续深究下去,甚至直接抛下了前端的学习。陋习陋习啊,必须得改不然能学到什么呢?

这次刚好看到SegmentFault里面一篇有关CSS深入理解float浮动的文章,特此好好学习一下。

float介绍:设置了float属性的元素会从普通文档流中脱离,相当于不占据任何空间,所以文档中普通流中的元素表现的就像浮动元素不存在一样,因此,设置float属性的后会影响我们的页面布局。具体说来就是:让block元素无视float元素,让inline元素像流水一样围绕着float元素实现浮动布局

  • 包裹性
  • 高度塌陷
  • 块状化
  • 没有任何的margin重合
  • 用clear消除float带来的高度塌陷:clear属性对”后面的”浮动元素是不闻不问的。clear属性只能清除元素的自身,不能影响其他的元素。none:默认值,允许两边都有浮动对象;left:不允许左侧有浮动对象;right:不允许右侧有浮动对象;both:两侧不允许有浮动对象。clear属性只对块级元素有效,但是::after等伪元素默认都是内联水平

.clear::after{ content: “”;

                        display: table;/*也可以是’block’或者是’list-item’*/

                        clear: both; }

BFC块级格式化上下文

BFC的表现原则为:如果一个元素具有BFC,那么它的内部子元素再怎么翻江倒海,都不会影响外部的元素。因此,BFC元素是不可能发生margin重叠的,另外,BFC元素也可以用来清除浮动的影响。

触发效果的满足条件:(任意一个)

  • html根元素;
  • float的值不为none;
  • overflow的值为auto、scroll或者hidden;
  • display的值为table-cell、table-caption和inline-block中的任何一个;
  • position的值不为relative和static;

作用:

  • 清除margin重叠
  • 清除高度塌陷的问题
  • 自适应布局(阻止文本换行)

希望可以有所收获,加油(ง •̀_•́)ง

CSS中的float》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注