CSS浮动特征
一个浮动盒会向左或者向右移动,其边会挨着父元素的框或者另一个浮动元素的边框并且对齐;
浮动盒需要一个可以容纳他的空间才会停止浮动,所以如果没有足够的水平空间来容纳,浮动盒会向下移动,直到空间合适;
因为浮动盒不在普通流内,文档普通流中的块级元素感知不到浮动元素的存在。
对父容器的影响
对父容器来说,浮动盒脱离普通流,父元素无法感知浮动元素的容量,如果父元素未设置高度值,父元素高度将无法只由浮动元素撑开,从而导致父元素的高度出现问题
对其他浮动元素的影响
如果设置浮动向左,会按照浏览器的渲染规则,第一个加载渲染的浮动元素向左移动,直到与父容器的边对齐,如果有多个浮动元素,第二个会向左移动,直到与第一个浮动元素的边紧挨,其后依旧;如果父元素的宽度无法容纳下一个浮动元素,则该浮动元素自动向下移动,然后向左移动,直到与父容器的边紧挨,但有时候会因为其他浮动元素高度的问题,出现卡主的情况;
对普通元素的影响
会被遮档,而且普通元素感知不到浮动元素的存在
对文字的影响
文字会被象水流一样挤开,如果为左侧浮动,则文字紧挨浮动元素的右侧排开,直到父元素的边框则换一行;