css浮动布局

　　上次我们一起对盒子模型进行了一定的了解，今天我们就对css浮动布局做一下研究。首先我们来了解一下网页基本布局的三种形式。

　　首先我们来了解一下什么是网页布局：

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

　　网页基本布局主要有三种形式:一是标准流，而是浮动流，三是定位流。

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

  • 其实浏览器默认的排版方式就是标准流的排版方式
  • 在CSS中将元素分为2大类, 分别是块级元素/行内元素
  • 还有一类是行内块级元素，它本质上是行内元素，不会占据一行，但又具有块级元素的属性，可以调整宽高和边距
  • 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
  • 垂直排版, 如果元素是块级元素, 那么就会垂直排版
  • 水平排版, 如果元素是行内元素, 那么就会水平排版

• 浮动流排版方式

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

• 注意点:

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

• 特点:

  • 　　在浮动流中是不区分块级元素/行内元素/行内块级元素的
  • 　　无论是块级元素/行内元素/行内块级元素都可以水平排版
  • 　　在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
  • 　　综上所述, 浮动流中的元素和标准流中的行内块级元素很像

• • 定位流排版方式

    • 　　定位流这里先不做解释

　　下面我们来一起了解下浮动布局的特点：

　　　　　1、浮动元素的脱标：

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

 

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

　　2、浮动元素排序规则

• 浮动元素排序规则
• 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

1. <style>
2. .box1{
3. float: left;
4. width: 50px;
5. height: 50px;
6. background-color: red;
7. }
8. .box2{
9. float: left;
10. width: 100px;
11. height: 100px;
12. background-color: pink;
13. }
14. .box3{
15. float: left;
16. width: 150px;
17. height: 150px;
18. background-color: yellow;
19. }
20. </style>

• 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

1. <style>
2. .box1{
3. float: left;
4. width: 50px;
5. height: 50px;
6. background-color: red;
7. }
8. .box2{
9. float: right;
10. width: 100px;
11. height: 100px;
12. background-color: pink;
13. }
14. .box3{
15. float: left;
16. width: 150px;
17. height: 150px;
18. background-color: yellow;
19. }
20. .box4{
21. float: right;
22. width: 200px;
23. height: 200px;
24. background-color: tomato;
25. }
26. </style>

• 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

1. <style>
2. .box1{
3. float: left;
4. width: 50px;
5. height: 50px;
6. background-color: red;
7. }
8. .box2{
9. width: 100px;
10. height: 100px;
11. background-color: pink;
12. }
13. .box3{
14. float: left;
15. width: 150px;
16. height: 150px;
17. background-color: yellow;
18. }
19. .box4{
20. float: left;
21. width: 200px;
22. height: 200px;
23. background-color: tomato;
24. }
25. </style>

　　3、动元素贴靠现象

• 什么是浮动元素贴靠现象?
  • 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显

• 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

• 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

　　4、浮动元素字围现象

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

1. div{
2. float: left;
3. width: 100px;
4. height: 100px;
5. /*background-color: red;*/
6. border: 1px solid #000;
7. }
8. p{
9. width: 500px;
10. height: 500px;
11. background-color: yellow;
12. }

 

 

• 应用场景
  • 图文混排