html的div位置特性的总结（floatpositionx-index）1，div的设置height和width是其内容的理论⼤⼩
1，为什么说内容的理论⼤⼩，因为实际内容如果⽐较⼤就会超出来。
通过设置overflow：hidden可以隐藏超出部分。
2，但对于其兄弟标签⽽⾔，认为他的占位⼤⼩=其理论内容⼤⼩+padding+border+margin。
如果实际内容超过其理论内容的⼤⼩，那么实际内容会和其兄弟标签重叠。
.html
<div id="d1">我是第⼀</div>
<div id="d2">
<div id="d3">我是第三（第⼆的⼦）</div>
<div id="d4">我是第四（第⼆的⼦）</div>
<div id="d5">我是第五（第⼆的⼦）</div>
<div id="d6">我是第六（第⼆的⼦）</div>
</div>
html里的float是什么意思<div id="d7">我是第七个</div>
.css:
div {
border: 5px solid red;
width: 200px;
height: 20px;
}
#d2 {
width: 250px;
height: 50px;
border-color:blue;
}
#d3 {
width: 300px;
border-color:green;
}
#d7{
width:150px;
border-color:orange;
}
View Code
注意：
1，如果div的内容是div组合，那么实际内容的⼤⼩就是内部各个设置的div的⼤⼩的总和；
2，如果div的内容是⽂本，那么⽂本长度超过理论div的长度，⽂本内容会⾃动换⾏超出来。
注意：超出（挤出）的内容⾃动换⾏了，但是换⾏的位置占⽤原标签的部分位置。
换⾏的位置和原标签的border，padding，margin：
<div id="d7" >我是第七个我是第七个我是第七个我是第七个</div>
View Code
2，默认div的位置根据其⽂档中上个兄弟标签(如果没有兄弟就看⽗标签）的位置确定。
为什么说默认情况，特殊情况如下：
⽐如 float属性；position属性；x-index属性。
所谓的⽂档流，指的是元素排版布局过程中，元素会⾃动从左往右，从上往下的流式排列。
并最终窗体⾃上⽽下分成⼀⾏⾏, 并在每⾏中按从左⾄右的顺序排放元素。
html的float特性
简介：
1，float让元素漂浮起来，浮动元素之间不会重叠
2，其他元素占⽤浮动元素原有位置
3，浮动元素如果和其他元素重叠，但将其他元素的内容挤出浮动元素范围。
3，浮动让div元素脱离标准流，漂浮在标准流之上
<div id="d1">我是第⼀</div>
<div id="d2">
<div id="d3">我是第三（第⼆的⼦）</div>
<div id="d4">我是第四（第⼆的⼦）</div>
<div id="d5">我是第五（第⼆的⼦）</div>
<div id="d6">我是第六（第⼆的⼦）666666666</div>
</div>
<div id="d7">我是第七个我是第七个我是第七个我是第七个</div>
<div id="d8">我是第⼋个个</div>
<div id="d9">我是第九</div>
@charset "utf-8";
div {
border: 5px solid red;
width: 180px;
height: 20px;
}
#d2 {
width: 450px;
height: 120px;
border-color: blue;
}
#d3 {
width: 500px;
border-color: green;
}
#d7 {
width: 150px;
border-color: orange;
}
#d6{
width:250px;
}
#d5 {
border-color: yellow;
float: right;
}
View Code
浮动只能左右浮动。
浮动的位置：⽔平⽅向，基准点在⽗元素内左右浮动；垂直⽅向，在⾮浮动兄弟元素的下⽅左右浮动。
对其他元素的影响：
3.1，如果浮动到空⽩位置，那么其他元素安排位置时就当它不存在。
将d5向右浮动到空⽩位置，d6就当d5不存在，占⽤d5的位置。
#d5 {
border-color: yellow;
float: right;
}
3.2，浮动元素浮动后的位置有其他元素，会将其他元素的内容挤开。
3.2.1，如果单个元素被重叠，元素的内容是⽂本，那么被重叠的⽂本内容会当作超出原元素的效果显⽰。（即⾃动换⾏显⽰）
#d5 {
border-color: yellow;
float: left;
}
3.2.2，如果多个元素被重叠，那么被挤出的内容，还是以原元素超出的效果⾃动换⾏显⽰。（多个元
素超出的部分会混乱显⽰）
（原位置）
d2向左浮动，将d7,d8,d9的内容挤下去，并且都重叠了
（浮动后效果）
3.3，多个元素浮动
3.3.1，多个连续的元素浮动，会尽量排成⼀⾏，排不下去⾃动换⾏
全部向左浮动：
#d3,#d4 ,#d5,#d6 {
border-color: yellow;
float: left;
}
d5，d6左浮动，d4右浮动：
#d5 ,#d6 {
border-color: yellow;
float: left;
}
#d4{
height:40px;
float:right;
}
排序原则：
⽔平⽅向，如果有浮动元素，以上⼀个同⽅向浮动元素的尾部为基准；
垂直⽅向，如果有浮动元素，以已有浮动元素为基准。
3.3.2，⾮连续浮动元素，浮动原因在同⼀个层，仍然遵循同⼀⽅尽量排成⼀排。
（原位置）
d4,d6向左浮动：⽔平⽅向，d6尽量和d4排成⼀⾏（并⾮严格⼀条直线）
#d4 ,#d6 {
border-color: yellow;
float: left;
}
总结浮动：
1，简单来说，浮动让原本垂直排序的元素，浮动元素与浮动元素尽量⽔平排序。
2，浮动让被被重叠元素的内容挤开，
⽔平⽅向在元素范围内挤开，
垂直⽅向向下挤，如果元素范围不够⼤，会挤出到原本元素范围的下⽅，产⽣环绕效果
4，清除浮动效果
clear : none | left | right | both
取值：
none  :  默认值。允许两边都可以有浮动对象
left  :  不允许左边有浮动对象
right  :  不允许右边有浮动对象
both  :  不允许有浮动对象
理解不允许哪边有浮动对象：
ps：并不是说哪边（哪个⽅向）的元素不浮动，⽽是通过改变⾃⾝位置（⼀般下移），让新位置那个⽅向没有浮动元素了4.1，不允许左边有浮动对象
4.1.1，例⼦⼀
d1,d2都左浮动效果：
想要div2到div1的下⽅，那么通过设置div2的样式：clear：left，那么之后的效果：
4.1.1，例⼦⼆
d4,d5,d6左浮动如下效果：
设置d5清除左边浮动对象后效果：
#d5{
clear:left;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。