浮动与高度塌陷

目录

一、网页布局

二、浮动

1、简介

2、特点

三、清除浮动

四、解决高度塌陷

五、图标字体（iconfont）的引入

---

一、网页布局

1.display属性常用的值 

值	说明
block	变成块元素
inline	变成行内元素
Inline-block	既是块又是行内元素
none	元素不会被显示

二、浮动

1、简介

        块元素在文档流中默认是垂直排列，如果希望块元素横向布局，可以用float。

        float 可以使元素浮动，向父元素的左侧或右侧浮动，脱离文档流。

     float（浮动）属性的值

属性值	说明
left	左浮动
right	右浮动
none	默认值，不浮动

2、特点

（1）浮动元素脱离文档流之后，不会再占有文档流的位置，它下边的元素会立即向上移动

（2）元素浮动之后，元素会尽量的向页面的左上或右上浮动

（3）浮动元素默认会在父元素区域内活动，不会从父元素中移出

（4）浮动元素上面是一个没有浮动块元素，则浮动元素无法上移

（5）浮动元素不会超过它上边的兄弟，最多一边齐

（6）浮动可以让页面中元素水平排列，也可以做图文效果，目前以布局为主。（浮动的元             素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以利用浮动来设置文字             环绕图片的效果。）

（7）脱离文档流之后，不会再区分块和行内元素。

         当元素设置浮动以后，会脱离文档流，块，行内元素的特点也会发生改变。

           块元素：不会独占一行；块元素的宽高被内容撑开

           行内元素：可设宽高

三、清除浮动

由于受到浮动的影响，box上移，希望清除其他元素浮动对当前元素产生的影响。

清除浮动原理：设置浮动后，浏览器会自动为元素添加一个上外边距，以使位置不受其他元素的影响 。 可以用clear属性来完成。

         可选值：

            none  默认值  不清除浮动

            left  清除左侧浮动元素对当前元素的影响

            right   清除右侧浮动元素对当前元素的影响

            both  清除两侧浮动元素对当前元素的影响

                   清除对他影响最大的那个元素的浮动                     

四、解决高度塌陷

      在文档流中，父元素的高度是被子元素撑开，若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷。会影响页面布局，这个必须解决。

     解决方案一：

             给父元素设置固定高度

             但在实际开发过程中，高度都是被内容撑开

     解决方案二：

  页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC。

  当开启了BFC后，元素会变成一个独立的布局区域，会有以下特点：   

           1:父元素的垂直外边距不会和子元素重叠

             2:开启BFC的元素不会被浮动元素所覆盖

             3:开启BFC的元素可以包含浮动的子元素（可以解决高度塌陷）     

     

  如何开启BFC？

           1:设置元素浮动

               -不推荐，还是会改变页面的布局，而且父元素的宽度会丢失

           2:设置元素为inline-block

              -不推荐，会丢失父元素的宽度

           3:将元素的overflow设置为一个非visible的值

              -可以使用，也会产生一些小的副作用

           4:设置元素绝对定位。

     overflow属性的值

值	说明
visible	默认值，内容不会被修剪，会呈现在盒子外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会加滚动条
auto	如果内容被修剪，则浏览器会显示滚动条

     解决方案三：

            利用 clear: both;清除浮动影响   

      解决方案四 ：

           添加一个内容，将内容转成块元素，清除两侧的浮动。

.box1:after {

        /* 添加一个内容 */

        content: "";

        /*将内容转成块元素  */

        display: block;

        /* 清除两侧的浮动 */

        clear: both;
}

五、图标字体（iconfont）的引入

     在网页中经常需要使用一些图表，可以通过图片来引入图片，但图片本身比较大，也不灵活

     使用图标的时候，可以将图标直接设置为字体，然后引入。

 <!-- 本地引入文件 -->
    <link rel="stylesheet" href="./font_3311895_f50jxqeizt9/iconfont.css">



<!-- 第一种使用 -->

 <i class="iconfont icon-gouwucheman"></i>

 <span class="iconfont icon-dingweixiao"></span>

<!-- 第二种使用 -->

 <i class="iconfont "> &#xe73d;</i>

<!-- 第三种方式 -->

 <p>定位图表</p>