关于浮动的相关问题

Posted 2020-09-23

浮动定位对文档流元素排版的影响

1.浮动元素会覆盖在文档流元素之上

<div class="A"></div>

<div class="B"></div>

.A{

width:200px;

height:200px;

float:left;

}

.B{

width:200px;

height:200px;

}

根据浮动不传播可知，第二个div没有浮动效果，所以第一个div会覆盖在第二个div上面

2.文档流元素存在文字内容，那么浮动元素覆盖在文档流元素上面会严重影响到文档流元素文字排版。

(1)任何元素被浏览器渲染都会分为盒模型，渲染文字文字内容，盒模型的渲染不会受到浮动元素的影响，但文字的渲染会受到浮动元素的影响。

(2)不浮动元素被浮动元素覆盖之后，文字排版规则如下：

A.不浮动元素不设置宽度，那么它的文字会排列在浮动元素的右侧

因为元素不设置宽度，盒模型的宽度为页面宽度，内容区的宽度为文字的宽度，所以元素被浮动元素覆盖之后，文字被挤到右侧之后，盒模型依然有足够的空间显示文字。

B.不浮动元素设置宽度，那么它的文字会排列在浮动元素的下方

因为元素设置宽度是内容内的宽度，没有内填充和边框的时候，内容区的宽度就等于盒模型的宽度，所以当文字被挤到浮动元素右侧的时候，元素没有足够的控件显示内容区，

所以文字会被挤到浮动元素下方显示。

 

任何不设置宽度的块元素使用浮动定位后，它的宽度就会变成实际内容的宽度，而不是页面的宽度