CSS布局-浮动布局

一、浮动流排版方式

1.浮动流是一种"半脱离标准流"的排版方式 ​

2.浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

- 浮动元素字围现象

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

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

- 高度塌陷

当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度， 导致父元素的高度塌陷。

-解决高度塌陷

1.将父元素的高度写死，以避免塌陷的问题出现。但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案不推荐使用。

2.可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以 撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度， 基本没有副作用。 ​ 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

<div class="clear"><div>
<style>
 .clear{
   clear:both;
 }
</style>

3.通过after伪类 ​ 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个 div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多