CSS浮动的基本介绍

CSS浮动特征

一个浮动盒会向左或者向右移动,其边会挨着父元素的框或者另一个浮动元素的边框并且对齐;
浮动盒需要一个可以容纳他的空间才会停止浮动,所以如果没有足够的水平空间来容纳,浮动盒会向下移动,直到空间合适;
因为浮动盒不在普通流内,文档普通流中的块级元素感知不到浮动元素的存在。

对父容器的影响

对父容器来说,浮动盒脱离普通流,父元素无法感知浮动元素的容量,如果父元素未设置高度值,父元素高度将无法只由浮动元素撑开,从而导致父元素的高度出现问题


CSS浮动的基本介绍_第1张图片
浮动001.png

对其他浮动元素的影响

如果设置浮动向左,会按照浏览器的渲染规则,第一个加载渲染的浮动元素向左移动,直到与父容器的边对齐,如果有多个浮动元素,第二个会向左移动,直到与第一个浮动元素的边紧挨,其后依旧;如果父元素的宽度无法容纳下一个浮动元素,则该浮动元素自动向下移动,然后向左移动,直到与父容器的边紧挨,但有时候会因为其他浮动元素高度的问题,出现卡主的情况;


CSS浮动的基本介绍_第2张图片
浮动002.png
CSS浮动的基本介绍_第3张图片
浮动003.png

对普通元素的影响

会被遮档,而且普通元素感知不到浮动元素的存在


CSS浮动的基本介绍_第4张图片
浮动004.png

对文字的影响

文字会被象水流一样挤开,如果为左侧浮动,则文字紧挨浮动元素的右侧排开,直到父元素的边框则换一行;

CSS浮动的基本介绍_第5张图片
浮动005.png

你可能感兴趣的:(CSS浮动的基本介绍)