让霸道的块级元素并排---浮动

float:left/right/none

    
    
    


第一个孩子
第二个孩子
第三个孩子
第四个孩子

将上面代码段中  float: left;  取消注释,页面展示如下:

问题:浮动元素不在界面上,导致下面的元素占领并排盒子的位置,父盒子高度塌陷

解决方法:

1、给父元素设定高度 不实际

.father{
    height: 200px;
}

2、overflow:hidden  会把有用的东西隐藏掉

.father{
    overflow: hidden;
}

3、清除浮动影响  clear: both left right 没有实现结构和样式相分离

    
第一个孩子
    
第二个孩子
    
第三个孩子
    
第四个孩子
    

4、创造一个不属于文档树的标签--->样式上创造标签-->伪元素

/*伪元素默认是行内元素 清除浮动影响需用块级*/
.clearFix::after{
    content: '';
    clear: both;
    line-height: 0;
    display: block;
}

解决后，网页显示：