标签：浮动 父级 clearfix 标签 元素 添加 CSS

CSS 浮动

浮动的设置

元素 {
  float: 属性值;
}

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

浮动的特性

脱标

• 脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标
• 浮动的盒子不再保留原先的位置

行显示

• 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对其排列
• 浮动的元素是相互贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐.

浮动元素具有行内块元素特性

任何元素都可以浮动.不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性.

• 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定.
• 浮动的盒子中间是没有缝隙的
• 行内元素同理

清除浮动

• 1.额外标签法,也成为隔墙法,是 W3C 推荐的做法
• 2.父级添加 overflow 属性
• 3.父级添加 after 伪元素
• 4.父级添加双伪元素

清除浮动-额外标签法

额外标签法会在浮动元素末尾添加一个空的标签.例如<div style="clear:both"></div>,或者其他标签(如<br />等).

• 优点: 通俗易懂,书写方便
• 缺点: 添加许多无意义的标签,结构化较差

注意:要求这个新的空标签必须是块级元素

清除浮动-overflow

可以给父级添加 overflow 属性,将其属性值设置为 hidden(常用),auto 或 scroll.

• 优点: 代码简洁
• 缺点: 无法显示溢出部分

注意:是给父元素添加代码

清除浮动-:after 伪元素法

:after 方式是额外标签法的升级版.也是给父元素添加

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6,IE7专有*/
  *zoom: 1;
}

用的时候需要给要清除浮动的元素的父元素添加 clearfix 类名

• 优点: 没有增加标签,结构更简单
• 缺点: 需要照顾低版本浏览器(主要指 IE6,IE7)

清除浮动-双伪元素清除浮动

也是给父元素添加

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  /*IE6,IE7专有*/
  *zoom: 1;
}

用法同上

• 优点: 代码更简洁
• 缺点: 需要照顾低版本浏览器

标签：浮动,父级,clearfix,标签,元素,添加,CSS
来源： https://www.cnblogs.com/wedfrgt/p/15859446.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。