float元素对兄弟元素的影响
提示:下面所说的前、后,指的是元素在 html 节点中的书写顺序。
对块级元素的影响
- 块级元素在float元素的前面和后面的显示效果是不一样的;
- 块级元素在前,则float元素就会在块级元素之后另起一行来显示;
- 块级元素在后,则块级元素会占据float元素所在行,且被float元素覆盖;
但是块级元素内的inline元素遇到float元素则会环绕其显示; - 注意:上面的显示规则跟块级元素是否设置宽度无关;
二、对inline元素的影响
- inline元素不多说,inline元素会环绕float元素显示;
- 直接看demo了解细节
三、float元素对float元素的影响
- 父容器的宽度足够容纳所有子元素,则在一行显示
- 父容器的宽度不够容纳所有子元素,则后面元素会另起一行显示
请看:demo