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>
使用浮动可能会导致一些负面影响，由于脱离文档流，无法撑起父元素导致背景以及边框无法正常显示、与其他元素重叠、下层浮动依旧会在上层浮动元素的基础上进行浮动等问题，此时就需要清除浮动。
通过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属性进行浮动清除。
<!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来清除浮动。
<!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
文章浏览阅读483次。十进制小数转化成二进制，就是不断地乘二，判断之后的这个数是否比1大，比1大则输出输出1，留下小数部分继续前面的操作。将3.75的小数部分转化为二进制。最后的输出结果是.11。_小数进制转换编程
文章浏览阅读739次。ofd文件打不开？ofd怎么转换为pdf？本文将给告诉大家ofd是什么文件格式？ofd怎么打开？ofd怎么免费转换为配pdf文件等，以下是具体的方法：一，什么是OFD文件？OFD是我国电子公文交换和存储格式标准。OFD格式是我国自主可控的电子文件版式文档格式。OFD版式文件，版面固定、不跑版、所见即所得，可以视为计算机时代的“数字纸张”；是电子文档发布、数字化信息传播和存档的理想文档格式。OFD格式是当下对于全国产环境具有明显的优势。因此，在自主可控档案系统中，OFD格式无疑是自主可控档案系.._在线生成一个 ofd文件
文章浏览阅读3w次。HDFS中的数据会以block的形式保存在各台数据节点的本地磁盘中，但这些block都是明文的。通过Web UI页面找到Block的ID和副本位于的机器信息如果在操作系统中直接访问block所在的目录，通过Linux的cat命令是可以直接查看里面的内容的，且是明文。在datanode找到其文件为：HDFS透明加密（Transparent Encryption）支持端到端的透明加密，启用以后，对于一些需要加密的HDFS目录里的文件可以实现透明的加密和解密，而不需要修改用户的业务代码。_mapreduce读写sequencefile、mapfile、orcfile和parquetfile文件
文章浏览阅读92次。3.0 API概述https://www.oracle.com/cn/java/technologies/java-se-api-doc.html如何使用API看类的描述 Random类是用于生成随机数的类看构造方法 Random():无参构造方法 Random r = new Random();看成员方法 public int nextInt(int n):产生的是一个[0,n)范围内的随机数调用方法： int number = r.nextInt(10_java se api常用类
文章浏览阅读285次。3-16心电图多分类预测task01一、赛题理解1.赛题理解1.数据概况1.评价指标二、baseline学习1.引入库2.读入数据3.数据预处理4.训练、测试数据准备5.模型训练总结提示：以下是本篇文章正文内容，下面案例可供参考一、赛题理解1.赛题理解以心电图心跳信号数据为背景，要求根据心电图感应数据预测心跳信号所属类别，其中心跳信号对应正常病例以及受不同心律不齐和心肌梗塞影响的病例，这是一个多分类的问题。1.数据概况以预测心电图心跳信号类别为任务，总数据量超过20万，主要为1列心跳信号序列数_机器学习在呼吸心跳信号检测中应用ti
文章浏览阅读930次，点赞2次，收藏2次。title : 第 45 届国际大学生程序设计竞赛（ICPC）亚洲区域赛（济南）tags : ACM,题解，练习记录。_icpc国际大学生程序设计竞赛题目
文章浏览阅读1.2k次，点赞19次，收藏19次。之前的教程演示了如何使用TensorFlow的决策森林（随机森林、梯度提升树和CART）分类器和回归器来准备数据、训练和评估。（我们将TensorFlow决策森林缩写为TF-DF。）您还学会了如何使用内置的函数可视化树，并显示特征重要性度量。本教程的目标是通过可视化更深入地解释分类器和回归器决策树。我们将查看详细的树结构图示，以及决策树如何划分特征空间以做出决策的描绘。树结构图帮助我们理解模型的行为，特征空间图帮助我们通过展示特征和目标变量之间的关系来理解数据。我们将使用的可视化库称为dtreeviz。_dtreeviz
文章浏览阅读2.1k次。MySQL8.0字符集_mysql8.0存储系统元数据的字符集是
文章浏览阅读3.1k次。美国队长1 - 2011年惊奇队长 - 2019年钢铁侠1 - 2008年无敌浩克 - 2008年钢铁侠2 - 2010年雷神 - 2011年复仇者联盟 - 2012年雷神2 - 2013年钢铁侠3 - 2013年美国队长2 - 2014年复仇者联盟2 - 2015年银河护卫队 - 2017年蚁人 - 2015年美国队长3 - 2016年奇异博士 - 2016年银河护卫队2 - 2017..._漫威电影观看顺序时间线
文章浏览阅读142次。众所周知PhotoZoom Classic是家庭使用理想的放大图像软件。目前很多用户还在使用PhotoZoom Classic 6，对于PhotoZoom Classic 7还是有点陌生。其实在6代衍生下出了7代，7代比6代多了很多适用的功能。下面我们就介绍一下PhotoZoom Classic 7中的新功能。PhotoZoom Classic 6的功能我们就不过多介绍，主要介绍7代中特有的功..._photozoon的作用
文章浏览阅读4.6w次，点赞75次，收藏349次。tensorflow中tf.keras.models.Sequential()用法Sequential()方法是一个容器，描述了神经网络的网络结构，在Sequential()的输入参数中描述从输入层到输出层的网络结构model = tf.keras.models.Sequential([网络结构]) #描述各层网络网络结构举例：拉直层：tf.keras.layers.Flatten() #拉直层可以变换张量的尺寸，把输入特征拉直为一维数组，是不含计算参数的层全连接层：tf.ker._tf.keras.models.sequential
文章浏览阅读2.8k次。实现代码如下:public static int factorial(int n){ if (n <= 1){ return 1; } return factorial(n-1) + factorial(n-2); }测试代码如下:System.out.println(factorial(40));测..._用递归方法编程计算fibonacci数列：(n=10)，fac.jpg