浮动(float)

浮动

[为了更好的兼容性，而使用浮动]
视觉格式化模型，大体上将页面中盒子的排列分为三种方式:

1. 常规流
2. 浮动
3. 定位

应用场景

1. 文字环绕
2. 横向排列

浮动的基本特点

修改float属性值为:

• left: 左浮动，元素靠左靠上排列
• right: 右浮动，元素靠上靠右排列
  默认值为none

1. 当一个元素浮动后，元素必须为块盒(浮动会强制把行盒变成块盒)
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

1. 宽度为auto时，适应内容宽度(自适应)(常规流则要求吸收剩余空间)
2. 高度为auto时，与常规流一致，适应内容的高度
3. margin为auto时，为0
4. 边框、内边距、百分比设置于常规流一致

盒子排列

1. 左浮动的盒子靠上靠左排列

2. 右浮动的盒子靠上靠右排列

3. 浮动盒子在包含块中排列时。会避开常规流盒子

4. 常规流块盒在排列时，无视浮动盒子

5. 行盒在排列时，会避开浮动盒子

如果文字没有在行盒中，浏览器会自动生产一个行盒包裹文字，该行盒叫匿名行盒

• 文字环绕

<div class="float">
    <img src="./../../使用资源/大虞海棠.jpg" alt="" style="width: 270px; float: left;">
    <p>大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠</p>
</div>

大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠

如果要让文字与图片略有间隔，应设置图片的margin-right；如果设置的是文字的margin-left[由于p元素完全无视浮动元素]不产生想要的效果

• 设置文字的margin-left、不产生理想效果

<div class="float">
    <img src="./../../使用资源/大虞海棠.jpg" alt="" style="width: 270px; float: left;">
    <p style=" margin-left: 100px;">大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠</p>
</div>

大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠

• 设置图片的margin-right、产生理想效果

<div class="float">
    <img src="./../../使用资源/大虞海棠.jpg" alt="" style="width: 270px; float: left;  margin-right: 100px;">
    <p>大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠</p>
</div>

大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠大虞海棠

6. 在浮动盒子中，不会发生外边距合并[只有在常规流才会发生外边距合并]

高度坍塌

[理解问题出现的原因并能找到解决问题的办法]
原因:浮动盒子脱离了常规流，因此常规流盒子的高度auto时，高度在计算时不会考虑浮动盒子，只考虑常规流盒子
(总结:常规流看不起浮动)

解决:清除浮动，涉及css属性: clear
clear

• 默认值: none
• left: 清除左浮动，该元素必须出现在前面所有左浮动盒子的下方(抬头看一眼天上的浮动盒子，参考它的位置)
• right: 清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
• both: 清除左右浮动，该元素必须出现在前面所有左右浮动盒子的下方

具体方法:

1. 写一个 < div class=“clearfix”></ div> 在前面所有的浮动盒子下方，相应地赋予

.clearfix{ 
    clear: both; 
}

常规流元素就会把浮动盒子撑开，解决了高度坍塌的问题[不过这个方法增加了一个空的容器]
2. 将 class=“clearfix” 样式加到发生高度坍塌的容器中，相应地赋予伪元素选择器[这个方法更好]

.clearfix::after{ 
    content: ""; 
    display: block; 
    clear: both; 
}

一旦出现了浮动元素，就加上clearfix