Float浮动

2024-06-09 13:28
文章标签 浮动 float

本文主要是介绍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

这篇关于Float浮动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1045308。

相关文章

C 标准库 - `＜float.h＞`

C 标准库 - `＜float.h＞`

C 标准库 - <float.h> 概述 <float.h> 是 C 标准库中的一个头文件，它定义了与浮点数类型相关的宏。这些宏提供了关于浮点数的属性信息，如精度、最小和最大值、以及舍入误差等。这个头文件对于需要精确控制浮点数行为的程序非常有用，尤其是在数值计算和科学计算领域。 主要宏 <float.h> 中定义了许多宏，下面列举了一些主要的宏： FLT_RADIX：定义了浮点数的基数。
阅读更多...
俩个float数之间比较大小

俩个float数之间比较大小

需求：俩个标识金额的浮点数比较大小。 问题：相等无法成立。经过var_dump()打印，俩个浮点数数值 一样大。 解决：把标识金额的浮点数乘以100，抓换成整形，在做比较。即可使相等成立
阅读更多...
CSS学习12--清除浮动的本质及处理办法

CSS学习12--清除浮动的本质及处理办法

清除浮动 前言一、清除浮动的本质二、清除浮动的方法 前言 为什么要清除浮动？ 浮动不占用原文档流的位置，可能会对后面的元素排版产生影响。因此需要在该元素中清除浮动，清除浮动后造成的影响。 一、清除浮动的本质 为了解决父级元素因为子级元素引起内部高度为0的问题。 <html><head><style>* {padding: 0;margin: 0;}.box1 {width:
阅读更多...
【C语言】---- 基本数据类型（char、int、float）

【C语言】---- 基本数据类型（char、int、float）

1 基本数据类型 C语言中的基本数据类型包括整型、浮点型和字符型，每种类型都有不同的存储大小和表示范围。以下是它们的常见表示形式和特点： 1.1 字符型 char类型用于表示单个字符，通常用于表示文本数据。char类型也被用来存储字符，但也可以用来存储较小的整数。在C语言中，char类型的大小一般为1字节（8位）。char类型可以是有符号的或无符号的，这取决于编译器和平台的实现。 1.2
阅读更多...
HTML 浮动窗口 表单及表单控件 标签汇总 线包字效果

HTML 浮动窗口 表单及表单控件 标签汇总 线包字效果

<html><head><title>第五讲代码</title></head><body><!--有时我们需要在一个含有<body>的页面嵌入另外一个页面，形成画中画的效果，这时就需要iframe元素（浮动窗口）-->*********************************************************************************
阅读更多...
C语言从头学55——学习头文件errno.h、float.h

C语言从头学55——学习头文件errno.h、float.h

1、头文件 errno.h 中的变量 errno 的使用        在 errno.h 定义了一个 int 类型的变量 errno（错误码），如果发现这个变量出现非零值，表示已经执行的函数发生了错误。这个变量一般多用于检查数学函数运算过程中发生的错误。        如果要检查某个函数是否发生错误，必须在即将调用该函数之前，将 errno 的值先置为0，防止误用以前的结果。        我们
阅读更多...
java基本数据类型 以及 double float 二进制表示方法

java基本数据类型 以及 double float 二进制表示方法

Java 基本数据类型分为4类：整型，浮点型，字符型，布尔型。 整数类型： 关键字占用字节数byte1short2int4long8 每个类型的取值范围，我们以int 为例，4个字节是32位。 第一位是符号位，那么最大表示的正整数为：2^31 =‭2,147,483,648‬ byte 占用1字节 8位，最大的正整数为2^7 = 128 浮点型数据： 浮点数据类型分为两种：单精度浮
阅读更多...
float 或 double 运算的时候会有精度丢失的风险？

float 或 double 运算的时候会有精度丢失的风险？

《阿里巴巴 Java 开发手册》中提到：“浮点数之间的等值判断，基本数据类型不能用 == 来比较，包装数据类型不能用 equals 来判断”。“为了避免精度丢失，可以使用 BigDecimal 来进行浮点数的运算”。 浮点数的运算竟然还会有精度丢失的风险吗？确实会！ 示例代码： float a = 2.0f - 1.9f;float b = 1.8f - 1.7f;System.out.
阅读更多...
自定义 浮动button 自动靠边 附加收缩功能

自定义 浮动button 自动靠边 附加收缩功能

悬浮按钮可全屏滑动，左吸附、右吸附，外加右吸附后2秒后收缩功能，收缩完点击弹出 ，先看下效果，右吸附和收缩： 左吸附部分注释掉了，可根据实际情况修改使用  package com.example.test1.customView;import android.animation.ObjectAnimator;import android.annotation.SuppressLint;
阅读更多...
c++ float截取位数

c++ float截取位数

#include <iostream> #include <sstream> #include <iomanip> using namespace std;   //fValue:需要截取的数据 //bits：位数 float CVedioPlayControl::Round(float fValue, int bits) {     stringstream sStream;     s
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2