CSS_浮动

浮动的现象:

  0.文字环绕。

  1.脱离了标准标准文档流。

  2.浮动元素互相贴靠。

  3.浮动元素有收缩现象。

float: left;
/*左浮动*/
float: right;
/*右浮动*/

清除浮动:

  1.给父元素设置固定高度

    缺点:使用不灵活 后期不易维护

    应用:网页中盒子固定高度区域,比如固定的导航栏

  2.内墙法(了解)

    规则:在最后一个浮动元素的后面加一个空的块级元素,并且设置clear:blth;

    缺点:结构冗余。

  3.伪元素(选择器)清除

    给父元素添加一个叫clearfix的公共类名,

.clearfix::after{
    content: '';
    /*设置内容为空*/
    display: block;
    /*转换为块级元素*/
    clear: both;
    /*清除浮动*/
}

  4.overflow:hidden;

overflow: visible;
/*超出部分显示(默认)*/
overflow: hidden;
/*超出部分隐藏*/
overflow: scroll;
/*超出部分滚动*/
overflow: auto;
/*自动*/
overflow: inherit;
/*继承父级*/

  清除浮动:

    给父元素加上:overflow: hidden;

 

posted @ 2020-03-18 17:27  手可摘星辰。  阅读(114)  评论(0编辑  收藏  举报