浮动元素的特征
浮动元素会脱离文档流,根据设置的 float 的属性值而向左或向右移动,直到它的border外边缘撞到父容器的内边缘为止。
浮动元素对其他元素的影响
对父容器
如果父容器是普通元素,由于浮动元素脱离了文档流,父容器察觉不到子元素的存在,所以父容器的高度就不能被撑开,高度为0,无法包裹住浮动元素。对其他浮动元素
其他浮动元素能察觉到浮动元素,左右移动的时候,撞到上一个浮动元素的边缘就会停止浮动,如果在本行装不下,后面的浮动元素就会往下移动,直到装下。如果前面的浮动元素高度不同,后面的就会在视觉上呈现被卡住的状态。对普通元素
普通元素无法察觉到浮动元素,该在哪还是哪,只是在视觉上会被浮动元素遮挡住。文本
文本可以察觉到浮动元素,会给浮动元素让出位置,在视觉上呈现环绕的效果。
打个比喻就是,普通元素住在一楼,浮动元素住在二楼,它们走来走去互不影响,而文本就相当于这个房子柱子,从上到下贯穿整个房子,可以察觉到所有的元素。