浮动float

标准文档流

标准文档流组成

• 块级元素（block level）

  • <h1> <h6> <p> <div> 列表
  • 独占一行，可设置宽高，宽度默认与父级元素相同

• 内联元素（inline）

  • <span> <a> <img/> <strong>等
  • 水平排列，不可设置宽高，宽度跟内容而定

display属性

• 控制元素的显示或隐藏
• 块级元素和行内元素的转换
  • display：inline
  • dispaly：block

标准文档流的特点

• 空白折叠
• 底部对齐
• 自动换行

行内元素居中 text-align
块级元素居中 margin：auto

css浮动技术

网页中浮动的应用：

• 横向导航菜单
• 商品列表

浮动

float

    <div id="father">
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">浮动的盒子……</div>
    </div>

设置左、右、浮动

    .layer03 {
        border:1px #060 dashed;
        float:left;
        /*float:right;*/
        

    }

浮动元素的特点

1. 浮动元素脱离标准文档流
   • 浮动元素的位置空出来，由非浮动元素占据
   • 浮动元素不论是块级元素还是行级元素，都可以水平排列，同时设置宽度和高度
2. 浮动元素具有相互贴靠的特点
3. 浮动元素具有文字环绕的特点
4. 浮动元素不设置宽度时具有收缩特点
5. 父级元素的宽度是所有浮动子元素的宽度之和

浮动带来的问题

1. 浮动元素使父容器失去高度，影响后续元素
2. 浮动元素脱离标准文档流，影响后续元素的布局位置

清除浮动的方法

1. 加高法

   • 设置浮动元素父容器的高度
   • 存在的问题

2. 清除法

   • 在受影响的元素中添加clear样式属性

    img {
        /*left right both none*/
        clear:both;
        
    }

3. 外墙法
   • 在浮动元素和受影响元素之间添加一个标签让该标签使用清除浮动属性
   • 存在的问题
4. 内墙法
   • 在浮动元素的父级元素的子元素末尾添加一个标签，让该标签使用clear
5. 溢出法
   • 给浮动元素的父级元素添加overflow属性，扩展了高度

溢出属性 overflow

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内筒会被修剪，但是浏览器会显示滚定条以查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

float布局会导致 高度塌陷：
解决 高度塌陷 在父容器中添加overflow：hidden
float：left