2018-01-05-WEB预习-布局-浮动

浮动

浮动

块元素在文档流中都是上下排列的。
想要让其左右排列：

• 方法一：设定display属性为inline-block，并且将几个块元素写在一行（去掉水平间隔）。
• 方法二：使用float来使元素浮动，从而脱离文档流。
  • 可选值：none，默认值；
    • left，元素会立即脱离文档流，向页面左侧浮动；
    • right，元素会立即脱离文档流，向页面右侧浮动；
  • 当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流。其下面的元素会立即向上移动。

浮动元素比一般元素靠上层，会覆盖一般元素。

遇到 父元素边框，前一个浮动元素 停止浮动。
如果 浮动元素 上边是一个 没有浮动的块元素 ，中间是一堵墙。

一行中不够容下所有浮动元素，则自动换行

浮动的元素不会超过其上边的兄弟元素。

浮动的元素不会盖住文字，文字会自动环绕的浮动元素的周围。
故可以通过浮动实现文字环绕图片效果。

在文档流中，子元素的宽度默认占父元素的全部。
当元素设置浮动后，会完全脱离文档流，高度和宽度默认被内容撑开（没有内容则没有高度宽度）

一旦脱离文档流，就不再区分 块元素与内联元素。（宽高都被内容撑开）
综合块元素和内联元素的特点：不独占一行（内联元素），可设置宽高（块元素）

---

高度塌陷

高度塌陷

子元素设为浮动后将无法再撑开父元素。

开启BFC（BlockFormattingContext）

• 设置父元素为浮动（会导致父元素宽度丢失，下边元素上移）
• 设置元素绝对定位
• 设置父元素为inline-block（会导致宽度丢失）
• 将父元素的overflow设置为hidden（副作用最小）。

hasLayout
IE6中没有BFC，但有另一个隐含属性hasLayout可解决高度塌陷问题。
开启方式很多：

• 副作用最小的的方式，zoom属性设为1。（放大倍数为1，即不变）
• 一旦设置了宽度，也会默认开启hasLayout。

为了浏览器兼容，一般写两个。（BFC+hasLayout）

---

高度塌陷的终极方案

有时希望清除掉其它元素浮动时对当前元素产生的影响，这时可以使用clear来清除其它浮动对当前元素的影响。
可选值：

• none，默认值；
• left，清除左侧浮动元素对当前元素的影响；
• right，清除右侧浮动元素对当前元素的影响；
• both，清除两侧浮动元素对当前元素的影响。（影响大的那一侧）

---

导航条实现

    
        
        
        
    
    
        
        
        

            
首页
            
新闻
            
联系
            
关于
            
首页
            
新闻
            
联系
            
关于