CSS-浮动和高度塌陷

1、文本溢出

/* 溢出文本为省略号 */
p{
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 溢出文本两行之后为省略号 */
p{
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 文字+数字的字符串两行之后为省略号 */
p{
    width: 300px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

2、外边距合并

（1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom与margin-top之和，而是取两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）

 

 

（2）嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及上边框，则父元素的上外边距会与子元素的上外边距合并，合并后的外边距为两者中的较大者。即使父元素的上外边距为0，也会发生合并

解决方案：

在父标签设置上边框border:1px solid black或设置上内边距padding-top:1px或为父标签设置overflow: hidden;

3、盒子阴影

带动画和鼠标覆盖显示盒子阴影：

<style type="text/css">
    #box1{
	height: 300px;
	width: 250px;
	border: 1px solid #EEEEEE;
	transition: all 0.5s;
    }
    #box1:hover {
	box-shadow: 0 0 10px 1px #D3D1D1;
	border-radius: 3px;
    }
</style>
<div id="box1"></div>

效果展示：

4、浮动

（1）元素浮动之后会尽量向页面的左边或右边漂浮，直到遇到父元素的边框或者其他浮动元素
（2）如果浮动元素的上边是一个没有浮动的块元素，则浮动元素不会超过块元素
（3）浮动的元素不会超过他上边的兄弟元素，最多和他排一行
（4）浮动的元素不会遮盖文字，文字会自动环绕在浮动元素周围，所以我们可以用浮动来设置文字环绕效果
（5）当元素设置了浮动以后，就会完全脱离文档流，块级元素脱离了文档流之后，高度和宽度都需要靠内容撑开    
（6）开启span浮动，内联元素脱离文档流以后可以设置宽高

5、高度塌陷（重点！！！）

在文档流中，父元素的高度默认是靠子元素撑开的，也就是子元素有多高，父元素就有多高，当子元素设置浮动以后，子元素就会完全脱离文档流，此时就会导致子元素无法撑开父元素高度，就导致了父元素的高度塌陷，由于父元素的高度塌陷了，则父元素下边的元素就会向上移动，导致页面布局混乱。

根据w3c的标准，在页面中的元素都有一个隐含的属性Block Formatting Context 简称BFC,该属性可以设置打开或关闭，开启了BFC的元素可以包含浮动的子元素(ie6不支持BFC属性)。

解决父元素高度塌陷方法（也可以作为清除浮动的方法    面试题！！！）：
       1、 开启BFC（块级格式化上下文）
           （1）设置元素浮动 ==> 不推荐，使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，导致页面混乱
           （2）设置元素为inline-block ==> 父元素会丢失宽度
           （3）将元素的overflow设置为一个非visible的值 ==> 最推荐设置overflow: hidden
       2、清除浮动：
           （1）给浮动元素的后面添加空div，设置clear:both，例如：<div style="clear: both;"></div> 
             优点：简单且兼容性好
             缺点：容易造成结构混乱，不利于后期维护 
           （2）通过after伪元素清除浮动，设置clear:both

<style type="text/css">
    #box1 {
        border: 10px solid red;
        /* 方法一：设置元素浮动 */
        /* float: left; */
    
        /* 方法二：设置元素为inline-block */
        /* display: inline-block; */

        /* 方法三：设置元素overflow: hidden */
        overflow: hidden;
    }
    #box1::after {
	/* 方法五：通过after伪元素清除浮动，设置clear:both */
	    content: "";
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden;
    }
    #box2 {
        height: 100px;
        width: 100px;
        background-color: blue;
        float: left;
    }
    #box3 {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<div id="box1">
    <div id="box2"></div>
    <!-- 方法四：给浮动元素的后面添加空div，设置clear:both -->
    <!-- <div style="clear: both;"></div> -->
</div>
<div id="box3"></div>