网页布局方式之浮动流

网页布局方式

1.什么是网页的布局方式

指浏览器是如何对网页元素进行排版的。

2排版方式

2.1标准流（文档流/普通流）排版方式

浏览器默认排版方式就是标准流的排版方式

两种排版方式：1.垂直排版（块级元素）

​ 2.水平排版（行内/行内块级）

css中将元素分为三类：行内元素/块级元素/行内块级元素

行内：不独占一行，不可设置宽高

块级:独占一行，可设置宽高

行内-块级：不独占一行，可设置宽高

通过display属性来改变元素类型。

2.2浮动流排版方式

浮动流是一种”半脱离标准流“的排版方式

浮动流只有一种排版方式：水平排版（左对齐/右对齐）

css的float属性

定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

浮动元素的脱标

脱标：脱离标准流

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;

    float: left;
}
.box2 {
    width: 150px;
    height: 150px;
    background-color: green;
  
}

<div class="box1"></div>
<div class="box2"></div>

当 某一个元素浮动时，那么这个元素看上去就像被标准流里删除了一样，然后标准流里只有一个box2就默认在左上角，这个时候box1浮动左边，就会盖住box2,这就是脱标。

注意点

1因为有些元素可能存在默认的外边距，所有我们使用浮动时，可能无法紧靠两侧，需要先清除默认外边距。

2.float没有居中对齐。在浮动流中无法使用,margin:0 auto;来使元素居中，无效的。

3.在浮动流中不区分块级/行内/行内-块级元素，所有元素都可以使用浮动流水平排版。

4.在浮动流中块级/行内/行内-块级元素均可以设置宽高。（所有的元素都可以认为行内-块级元素）

2.3定位流排版方式