首页 > Web开发 > 详细

css 关于浮动float的使用以及清除浮动

时间:2019-11-26 00:32:57      阅读:106      评论:0      收藏:0      [点我收藏+]

float:none | left | right

默认值:none

适用于:所有元素         

none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边

  • 当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
  • float在绝对定位和display为none时不会被应用。 
  • 什么时候用浮动?--让元素变成一行,水平布局时、需要文本环绕效果时
  • 浮动的特点,半脱离文档流,且会对后面的元素产生影响。

    1、父级没有设置高度的时候,会出现塌陷
    2、父级的宽度不够,会换行排列
    3、改变元素类型 变成行内块

  • 清除浮动float的三种方法
  1. 对后面的元素进行操作。

给后面元素添加,clear:both;

1.1额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)

2触发BFC效果。

通过触发BFC方式,实现清除浮动

父级添加overflow属性(父元素添加overflow:hidden)(不推荐)

3对父元素进行操作.

3.1父级添加overflow属性(父元素添加overflow:hidden)(不推荐)

3.2使用after伪元素清除浮动(推荐使用)

3.3使用before和after双伪元素清除浮动

css 关于浮动float的使用以及清除浮动

原文:https://www.cnblogs.com/milankundea/p/11546635.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!