下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:css 关于浮动float的使用以及清除浮动

作者:MilankundeA     来源: https://www.cnblogs.com/milankundea/p/11546635.html点击数:1055发布时间: 2020-03-15 17:33:36

标签: csswebhtml

Web开发

  css的识别符也需要用反斜杠"\\"规避特殊字符,这些规避字符遵循IS010646规范。特殊字符的规避方法有两种:第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠,例如,"AT&T"变为"AT\\&T";另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起,规避特殊字符,例如,"AT&T"变为"AT\\26T"。

  float:none|left|right

  默认值:none

  适用于:所有元素

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

  当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。

  float在绝对定位和display为none时不会被应用。

  什么时候用浮动?--让元素变成一行,水平布局时、需要文本环绕效果时

  浮动的特点,半脱离文档流,且会对后面的元素产生影响。

  1、父级没有设置高度的时候,会出现塌陷

  2、父级的宽度不够,会换行排列

  3、改变元素类型变成行内块

  清除浮动float的三种方法

  对后面的元素进行操作。

  给后面元素添加,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是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于html网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

赞(13)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程