Float浮动
时间:2022-07-24
本文章向大家介绍Float浮动,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Float浮动
CSS
中float
属性会使元素浮动,使元素向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
实例
- 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
- 使用
float
意味着使用块布局,其会在display
非块级元素情况下修改display
值的计算值。 - 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素会脱离文档流但不会脱离文本流,当浮动时其不会影响周围的盒子模型,但是文字会环绕在浮动元素周围,可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。
- 文档流,指的是盒子元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
- 文本流,指的是文字元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
- 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style type="text/css">
body > div{
border: 1px solid #eee;
padding: 5px 0;
margin: 5px 0;
}
.t1{
margin: 0 5px;
float: left;
background-color: #EEE;
}
</style>
</head>
<body>
<div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
</div>
</body>
</html>
文字环绕效果
可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层,当元素浮动时,其脱离文档流不脱离文本流,所以浮动元素的渲染与文字的渲染是一并渲染的,浮动元素会将文字元素挤开,呈现文字环绕浮动元素的效果。
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style type="text/css">
body > div{
border: 1px solid #eee;
padding: 5px 0;
margin: 5px 0;
}
.t1{
margin: 0 5px;
float: left;
background-color: #EEE;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="t1">Float</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
</div>
</body>
</html>
虽然float
最初的设计就是用来实现文字环绕效果的,在某些使用float
的布局下若是不想触发文字环绕效果,可以通过触发BFC
来避免文字环绕。
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style type="text/css">
body > div{
border: 1px solid #eee;
padding: 5px 0;
margin: 5px 0;
}
.t1{
margin: 0 5px;
float: left;
background-color: #EEE;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="t1">Float</div>
<div style="overflow: auto;">
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
</div>
</div>
</body>
</html>
清除浮动
使用浮动可能会导致一些负面影响,由于脱离文档流,无法撑起父元素导致背景以及边框无法正常显示、与其他元素重叠、下层浮动依旧会在上层浮动元素的基础上进行浮动等问题,此时就需要清除浮动。
使用clear属性
通过CSS
的clear: both;
清除浮动。
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style type="text/css">
.container{
border: 1px solid #eee;
padding: 5px 0;
margin: 5px 0;
}
.t1{
margin: 0 5px;
float: left;
background-color: #EEE;
height: 100px;
width: 100px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
<!-- 此处不清除浮动会产生负面效果 -->
</div>
<div class="container">
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
<!-- 清除浮动 -->
<div class="clear"></div>
</div>
<!-- 若是在此处清除浮动也是可以的 但是会无法撑起容器高度 -->
<div class="container">
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
<!-- 清除浮动 -->
<div class="clear"></div>
</div>
</body>
</html>
配合::after与clear属性
通过使用伪元素::after
配合clear
属性进行浮动清除。
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style type="text/css">
.container{
border: 1px solid #eee;
padding: 5px 0;
margin: 5px 0;
}
.t1{
margin: 0 5px;
float: left;
background-color: #EEE;
height: 100px;
width: 100px;
}
.container::after{
clear: both;
content:"";
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
</div>
<div class="container">
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
</div>
</body>
</html>
触发BFC
触发浮动容器的BFC
来清除浮动。
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style type="text/css">
.container{
border: 1px solid #eee;
padding: 5px 0;
margin: 5px 0;
overflow: auto; /* 触发BFC */
}
/* BFC 块级格式化上下文 https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/%E5%9D%97%E7%BA%A7%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87.md */
.t1{
margin: 0 5px;
float: left;
background-color: #EEE;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
</div>
<div class="container">
<div class="t1">Float</div>
<div class="t1">Float</div>
<div class="t1">Float</div>
<div style="height: 10px;background-color: blue;"></div>
</div>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.cnblogs.com/lingdu87/p/7770752.html
https://developer.mozilla.org/zh-CN/docs/CSS/float
https://www.w3school.com.cn/css/css_positioning_floating.asp
- Spark源码系列(四)图解作业生命周期
- Spark源码系列(五)分布式缓存
- 看我如何基于Python;Facepp打造智能监控系统
- Spark源码系列(六)Shuffle的过程解析
- Spark源码系列(九)Spark SQL初体验之解析过程详解
- Spark源码系列(七)Spark on yarn具体实现
- 我们要在任何可能的地方测试XSS漏洞
- Angr:一个具有动态符号执行和静态分析的二进制分析工具
- Spark编程指南
- Spark Streaming编程指南
- Spark源码系列(八)Spark Streaming实例分析
- “震网三代”(CVE-2017-8464)的几种利用方法与防范
- Spark1.0新特性-->Spark SQL
- 挖洞经验 | 看我如何综合利用4个漏洞实现GitHub Enterprise 远程代码执行
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS7设置定时任务
- linux上安装zookeeper 启动和关闭的教程
- linux中rz上传、sz下载命令详解
- Linux alias命令编写
- 详解linux系统调用原理
- Linux下安装pyenv的方法
- 详解Linux如何生成随机数字和字符串
- linux(ubuntu)用户连续N次输入错误密码进行登陆时自动锁定X分钟
- linux下安装golang的方法
- Linux系统的文件传输方法
- CentOS 6.8 NFS 文件共享设置的方法
- linux如何mount挂载磁盘并设置开机自动mount的实现
- 浅谈Linux的编码及编码转换方法
- 在 Linux 上用 DNS 实现简单的负载均衡的方法
- centos7.2.1511安装jdk1.8.0_151及mysql5.6.38的方法