CSS-浮动

网页的布局方式?

网页的布局方式其实就是浏览器是如何对网页中的元素进行排版

标准流(文档流/普通流)排版方式

• 其实浏览器默认的排版方式就是标准流的排版方式
• 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
• 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
  垂直排版, 如果元素是块级元素, 那么就会垂直排版
  水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

浮动流排版方式

• 浮动流是一种半脱离标准流的排版方式
• 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

注意 : 浮动流中没有居中对齐, 也就是没有center这个取值 , 也不可以使用margin: 0 auto;

特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的 , 都可以水平排版, 都可以设置宽高

定位流排版方式

---

浮动元素的脱标

• 脱标: 脱离标准流
  当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

• 浮动元素脱标之后的影响
  如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

---

浮动元素排序规则

• 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
• 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
• 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

.box1{
    float: left;
    width: 50px;
    height: 50px;
    background-color: red;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: pink;
}
.box3{
    float: left;
    width: 150px;
    height: 150px;
    background-color: yellow;
}
.box4{
    float: left;
    width: 200px;
    height: 200px;
    background-color: tomato;
}

---

浮动元素贴靠现象

• 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
• 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
• 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

.father{
   width: 300px;
   height: 400px;
   border: 1px solid #000;
}
.box1{
   float: left;
   width: 50px;
   height: 300px;
   background-color: red;
}
.box2{
   float: left;
   width: 50px;
   height: 100px;
   background-color: green;
}
.box3{
   float: left;
   width: 250px;
   height: 100px;
   background-color: blue;
}

---

浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

.cai {
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    padding: 10px;
    margin: 100px auto;
}

img {
    float: left;
    width: 200px;
    margin-right: 10px;
}