css 关于浮动float的使用以及清除浮动
2024-08-31 14:25:36
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双伪元素清除浮动
最新文章
- ABP(现代ASP.NET样板开发框架)系列之4、ABP模块系统
- bootstrap-fileinput简单完整列子
- Git: 一些基本命令
- java swing 中的FileDialog
- C语言redirection
- ASP.NET MVC 3 Razor Views in SharePoint
- orainstRoot.sh到底执行了哪些操作
- ubuntu下30天自制操作系统还在继续学习中
- 更改linux系统提示信息
- Spring Boot之Hello World
- 单元测试(qunit)
- Linux下编辑、编译、调试命令总结——gcc和gdb描述
- SharePoint 2007 页面及用户控件
- linux(centos) 添加系统环境变量
- java实现按中文首字母排序的方式
- IIS进程回收后第一次访问慢的问题
- POJ1743 Musical Theme [后缀数组+分组/并查集]
- 【洛谷】【归并排序】P1908 逆序对
- JS设计模式——8.桥接模式
- 让别人能登陆你的mysql