孙肖宁

浮动布局
浮动布局语法:关键字:float。值:left(左浮动);right(右浮动)。特点:元素浮动之后不占据原来的位置...
扫描右侧二维码阅读全文
19
2018/02

浮动布局

浮动布局

语法:
关键字:float值:left(左浮动);right(右浮动)

特点:

  • 元素浮动之后不占据原来的位置(脱标),下面的元素会在浮动元素的下面。
  • 浮动的盒子在一行上显示。
  • 行内元素浮动之后转换为行内块元素。(转行内块元素不推荐使用此方法,转行内元素最好使用display: inline-block;)。
  • 浮动通常用于:文本绕图(文字不会位于浮动元素的下面)、制作导航(通常是li的浮动)、网页布局。
  • 浮动的盒子一般都给宽度,浮动的盒子千万不要让他超出父盒子,超出父盒子的部分会影响下面盒子中的浮动的子盒子。
  • 浮动的盒子比标准流盒子高,但是能够遮挡住标准流盒子,遮挡不住里面的图片和文字。
  • 同一个父级元素的子盒子,要么都浮动,要么都不浮动。
  • 浮动的盒子相互影响,不管是否在一个盒子中。
  • 建议浮动的盒子都给宽高,尽量盒子之间有点距离。
  • 浮动的盒子,超出父盒子宽度换行解决办法:再给浮动的盒子一个父盒子,父盒子宽度大于要显示的子盒子总宽度,然后用,overflow:hidden切掉。
  • 同级相邻的浮动的盒子顶边对齐。

清除浮动

由于元素浮动之后不占据原来的位置(脱标)的缘故当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误,位于浮动元素的下面,所以引入了清除浮动的概念,清除浮动不是不用浮动,清除浮动产生的不利影响。

  • 清除浮动的方法

清除浮动,其实是清除浮动产生的不利影响。
关键字:clear 值:left(清除左浮动);right(清除右浮动);both(清除相关所有浮动,应用最多)

  • 给父元素设置高度。
  • 额外标签法

在最后一个浮动元素后添加一个清除浮动的标签。例如:<div style="clear: both;"></div>

  • 给父集元素使用overflow:hidden;或者overflow:auto但是,如果有内容出了盒子,外面的部分将会被隐藏,不能使用这个方法。
  • 伪元素清除浮动
    首先定义一个伪元素清除浮动,然后在父元素中调用。
.clearfix:after{
    display:block;
    clear:both;
    height:0;
    content: "";
    visibility: hidden;
    overflow:hidden;
}
.clearfix{
   zoom:1;
}

或者:双伪元素标签法

.clearfix:before,  .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
     zoom: 1;
}

附录:overflow

  • overflow:visible;默认值,超过元素框不会被隐藏,会显示在外面。
  • overflow:hidden;超过元素框会被修剪,不会显示在外面。
  • overflow:scroll;超过元素框会被修剪,但是浏览器会存在滚动条,用户可以通过滚动条来查看所有内容。
  • overflow:scroll;超过元素框会被修剪,如果元素被修剪了,浏览器才会出现滚动条,用户可以通过滚动条来查看所有内容。
Last modification:March 1st, 2018 at 02:48 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment