前端入门part16网页布局

网页布局方式

• 就是指浏览器如何对网页中的元素就行排版的；

标准流排版方式

• 在标准流中有两种排版方式：垂直排版（块级元素）和水平排版（行内元素或者行内块级）；

浮动流排版方式

• 加上float：left；就不会选择默认的标准流排版而是选择浮动流；（跟父元素左对齐或者右对齐）
• 也就说浮动流只可以水平排版只可以设置左对齐或者右对齐而不会居中对齐；
• 在浮动流中，margin：0 auto 是无效的，不可以使用！！！！！！！！
• 在浮动流中，无论是块级元素还是行内元素或者行内块级元素都可以水平排版！

浮动元素的脱标

• 当一个元素浮动之后，那么这个元素就像被从标准流中删除了一样；
• 如果前面一个元素脱标了，后面一个元素没有浮动，那么这个时候前面的元素就会盖住后面的一个元素；
• 浮动元素排序规则
• ①相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的在后面；
• ② 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动；
• ③ 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来决定；

浮动元素的贴靠

• 如果父元素可以装得下；那么按照顺序依次贴靠；
• 装不下时，找他贴靠的前一个元素装得下则贴靠；
• 否则再往前找，直到找到父元素，无论是否装得下也就放在那了；
• 

浮动元素的字围现象

浮动元素不会盖住没有浮动中的文字；！！！！！！！！

这种图片加文字介绍的排版方式：

浮动元素的高度问题

• 在标准流中内容的高度可以撑起父元素的高度；
• 在浮动流中浮动的元素不可以撑起父元素的高度；

实战演练！！！！！！！！！

比如这种布局该如何实现呢？

当当当当！（代码有点多不粘了）

定位流排版方式