浮动 元素切换

浮动 float

1：浮动后：元素本身脱离文档流，原来的位置被其他元素所占据
2：浮动后；在同一个父元素中，目标元素回占据一个浮动后位置。
3：注意：浮动只能是；子元素在容器中进行位置移动。如果父容器剩余宽度不能容纳两一个子元素，那么久换行。
** 目标元素的浮动范围：父容器
4：同一位置多个元素；具有浮动属性的元素；层级高于不惧有浮动属性的元素

总结;浮动规律：第一步元素在布局流中的起始位置，第二步 ：沿自身水平方向进行浮动，如果水平方向空间不够，那么自动换到下一行
4：问题：如果父元素没有有高度那么会出现什么问题呢？？
父元素没有设置固定高诶；那么 ，父元素高度由子元素撑起来。
如果所有子元素都脱离了文档流；那么父元素久没有高度了
只有不脱离文档流的元素才能撑起父元素的高度

5: 解决浮动 带来的问题，
- 方式一：给父元素设置一个固定高度
- 方式二：在最后一个浮动元素，元素下面新加一个元素，清除浮动
- 方式三：伪元素清除；给父元素添加微元素 content:"",display:block ;clear:both;

元素属性切换

行；块；行内块；可以相互转化

总结：所有破坏流式布局的属性，都是讲原本的块元素转化为行内块。