电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 浮动定位BFC边距合并（1） [打印本页]

作者: look_w 时间: 2019-2-19 19:01 标题: 浮动定位BFC边距合并（1）

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素会脱离正常的文档流，能设置的值为float:left/right;他会向左或像右移动直到触碰到父容器的框或者其他浮动元素的框为止。（受父元素padding和自身的margin影响）

对父容器的影响。

假如父容器下的元素全部为浮动元素，父容器的高度将不能被撑开。

对其他浮动元素

其他浮动元素会感知到浮动元素的存在，同时设置向左浮动的话，其他浮动元素会依次像右排列，但是如果造成“溢出”的现象，左浮动元素如果高度一致，会再从父元素的框排列，不一致的话，较高的浮动元素卡住浮动元素。

对普通元素和文字的影响。

普通元素感知不到浮动元素的存在，视觉上会被浮动元素覆盖。但是文字会感受到float元素的存在，会形成文字环绕的效果。
2.清除浮动指的是什么？如何清除浮动，两种以上的方法。

清除浮动指的是消除浮动元素对其他元素造成的不利影响。主要解决父元素高度塌下的问题。

清除浮动的方法。

      用clear属性。
      具体为需要清除浮动的元素加上clear:both/left/right等属性，不允许自身的左边右边有浮动元素。对于父元素来说，可以在最后加上一个空的div标签，并给div设置clear:both;这样，空的div标签不允许自身被浮动元素包围，且在正常文档流中，父元素就得包裹空的div标签，父元素高度塌陷问题就可以解决。

      用BFC清楚浮动。

BFC
利用BFC重构的格式化块状元素上下文规则来达到清除浮动的目的。但是又由于要把块状元素设置为符合BFC要求的块状元素会有各种各样新的问题，所以应该结合自身需要为其设置。
常见的方法（副作用较小的方法）
方法一

方法二

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)