【css-task7】什么是浮动?有哪些清除浮动的方法??
分享人:王刚
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
什么是float
浮动最开始出现的本意是用来让文字环绕图片
但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在, 在inline-block出来之前,浮动大行其道。直到inline-block出来后,浮动也有它自己独特的使用场景。
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素才会停下来。
float属性值:left、right、none、
浮动的特性
包裹性
首先包裹性很好理解,一个block元素不指定width的话,默认是100%,一旦让该div浮动起来,立刻会像inline元素一样产生包裹性,宽度会跟随内容自适应。
破坏性
这里破坏性是指元素浮动后可能导致父元素高度塌陷。
浮动破坏性原理: 因为浮动元素被从文档正常流中移除了,父元素当然还处在正常流中,所以父元素不能被浮动元素撑大。 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)
常见的清除浮动的方法、
1、clear属性
left:元素左侧不允许有浮动元素
right:元素右侧不允许有浮动元素
both:元素左右两侧均不允许有浮动元素
none:默认值,允许浮动元素出现在两侧
2、给浮动元素父级设置高度
高度塌陷是应为给浮动元素的父级高度是自适应导致的,那么我们给它的设置适当的高度就可以解决这个问题了。
缺点:在浮动元素高度不确定的时候不适用
3、以浮制浮(父级同时浮动)
缺点:需要给每个浮动元素父级添加浮动,浮动多了容易出现问题。
计算BFC的高度时,浮动元素也参与计算
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
4、br 清浮动
br 标签自带clear属性,将它设置成both其实和添加空div原理是一样的。
5、使用after伪元素
通过父元素的::after伪元素来生成浮动元素的兄弟元素,然后兄弟元素使用clear:both方法。
4.解决方案
clear只对block元素起作用
需要对产生高度塌陷的元素使用after,而不是浮动的元素本身
1.http://zh.learnlayout.com/clearfix.html
1.清除浮动(clearfix hack)
2.http://lightcss.com/all-about-clear-float/
2.清理浮动的那些事儿——6种清理浮动的方法
语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值。如果省略,则该函数不返回值。 用 return 语句来终止一个函数的执行,并返回 expression 的值。如果 expression
被省略, 或在函数内没有 return 语句被执行,则把值 undefined 赋给调用当前函数的表达式。