对于float的理解

float是css中很重要的一个属性,(最初是为了做图片环绕技术)后面被人们常用于页面布局。

我个人对于浮动的理解:当对于一个元素设置浮动属性的时候,首先这个元素先向外平移一个平面,然后往设置的方向进行浮动,直到遇到父级的边界或者其他的浮动元素就会停止,现在所在的平面就不是以前那个平面了,相应的之前的位置也不复存在了,所以就有了脱离文档流这一说。因为他脱离了文档流,不在之前的那个平面了,所以当父级没有设置高度时,就没有内容撑开了。然后就有了页面塌陷这么一说。所以说到底,他们的根源都是因为浮动元素脱离文档流所导致的。那么问题来了,大家应该怎样解决这些问题了?

1.刚才说了,父级元素没有设置高度时,浮动元素脱离文档流后没有内容支撑,就没了高度。所以大家可以自己给父级一个高度就可以解决了。

2.刚才说到了,浮动元素脱离文档流后上升到了另外一个平面,所以父级里面没有东西支撑可以导致页面塌陷,那么大家能不能想一个办法让父级也到这一个平面了?父级如果也到这个平面之后,不就有东西支撑了吗?然后大家是不是就可以让父级也浮动?

3.对于清除浮动有一个属性专门清除浮动所带来影响的clear:left/right/both;添加新的元素 、应用 clear:both;

4.是对3的拓展,因为你这样就会多一段代码,所以就想到了伪元素。父级::after{display:block;(必须要有的)content:"";(必须要有的)clear:both;zoom:1;(但是有的浏览器不兼容)}所以一般都是:父级{(兼容IE6/7)zoom:1;}

父级::after{content:"";display: block;height:0;clear:both;}

浮动后的会级元素的属性也发生了变化:设置浮动之后,块级元素的宽度不再跟随父级宽度,而是内容决定(内容撑开宽度)

浮动后的会级元素的属性也发生了变化:可以设置尺寸以及盒模型。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,401评论 1赞 88
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    hiuman阅读 399评论 0赞 1
  • 浮动定位 BFC 边距合并 浮动元素 div的顺序是HTML代码中div的顺序决定的。 浮动可以理解为让某个div...
    nianxiaoge阅读 212评论 0赞 0
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 208评论 0赞 0
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 424评论 0赞 1