CSS - Float

已于 2022-06-13 10:10:20 修改
阅读量308 收藏
点赞数 1
分类专栏： # HTML/CSS/JS 文章标签： CSS 前端 Float clear:both
于 2018-05-24 10:30:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dream_weave/article/details/80430775
版权

案例

.box1{  
    width:200px;  
    padding:20px;  
    border:1px solid red;  
    margin:10px;     
} 
.float{ float:left; }
.clear{ clear:both; }

<div> <!-- 效果1 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
</div>
<div class="box1">文本内容4</div>

<div> <!-- 效果2 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
	<div class="box1">文本内容3</div>
</div>

<div> <!-- 效果3 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
	<div class="clear"></div>
	<div class="box1">文本内容3</div>
</div>

<div> <!-- 效果4 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
	<div class="clear"></div>
</div>
<div class="box1">文本内容3</div>

<div> <!-- 效果5 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
</div>
<div class="clear"></div>
<div class="box1">文本内容3</div>

理论

浮动目的
i、当前元素进行浮动；
ii、对其他元素有浮动影响。


Ps1：float属性定义了元素在哪个方向进行动，在HTML中任何元素都是可以浮动的。
Ps2：float:right; 元素排列倒序，因为先渲染的先进行右浮动。


a、浮动可以使得行内元素=>块级元素。


b、浮动块虽然脱离的文档流，但是依然占据文档的空间。

Ps：应用：文字环绕图片。


c、浮动导致的副作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        .per{
            width:500px;
            height: auto;
            border: 1px solid #000;
        }
        
        .test{
            width: 80px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
        
        .bro{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="per">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    </div>
    <div class="bro"></div>
</body>
</html>


d、zoom：IE专用属性，为了兼容IE的内核浏览器；超出的部分，自动撑开。类似于 heigh:auto; 不过heigh只适用于标准流，而浮动破坏了这规则，但是zoom照样可以控制浮动的元素。


Ps1：第一种解决办法其实是通过高度给人一种错觉，但是元素一旦多了就会撑下去了，又塌陷了。
Ps2：更推荐使用“::before”伪元素来清除浮动更规范。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            float: left;
        }
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
        
        .bro{
            width: 100px;
            height: 100px;
            background: blue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
    <div class="bro"></div>
</body>
</html>


e、Clear 属性
  - clear:none
  - clear:left
  - clear:right
  - clear:both

最佳清除浮动方式

.clearfix:before,
.clearfix:after 
{
    content:" ";
    display: table;
}

.clearfix:after 
{
    clear: both;
}
放羊的牧码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS-float详解.pdf
07-19
CSS-float详解.pdf 开发文档
css-paper-effect---float
03-29
CSS-纸效果-浮动
css float的代码顺序和html页面显示顺序的问题
萧逸才的博客
05-14 2532
这其实不什么大problem，但是不注意的话也是不小的麻烦，so…… 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .div-right{ margin:0px; padding: 0px; height: 100px; wi
Float源码详解
weixin_45841729的博客
11-22 428
一、继承关系图 二、Float类介绍 1、属性 // 保存正无穷大的常量 public static final float POSITIVE_INFINITY = 1.0f / 0.0f; // 保存负无穷大的常量 public static final float NEGATIVE_INFINITY = -1.0f / 0.0f; // 保存非数字的常量 public static final float NaN = 0.0f / 0.0f; // 最大正数 public static fina
float编码方式
Code_BaiYE的博客
10-26 3098
原文地址：http://blog.csdn.net/wlz156/article/details/52701048 int(32bit): 内容    SNNN NNNN    NNNN NNNN    NNNN NNNN    NNNN NNNN float(32bit): 内容    SEEE EEEE    EMMM MMMM    MMMM
c语言float代码,[求助]float
weixin_34530489的博客
05-20 638
[求助]float有问题请教下面是个实型变量的输出例题：main(){float x,y;double z;x=123456789.123;y=-12345.123;z=-123456789.123;printf("x=%f,y=%f,z=%f\n",x,y,z);}输出结果为：x=123456792.000000,y=-12345.123000,z=-123456789.123000就是这个题啊...
java.lang.*中Float 源代码详解
u014344668的专栏
09-01 613
java.lang.*中Float 源代码详解核心方法 学习Java的同学注意了！！！ 学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群，群号码：543120397 我们一起学Java！ 核心方法 public final class Float extends Number implements Comparable<Float> String toString(float f) String toHexString(float f) Float valueOf
CSS-float详解[借鉴].pdf
10-11
CSS-float详解[借鉴].pdf
P510-FE-CSS-fonts-icons-float-position-wireframe
05-16
P510-FE-CSS-字体-图标-浮动位置-线框 资源 图标和svg（可读） 图标和SVG在线工具（使用） 漂浮 位置 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 家庭作业-您应该使用在上一堂课中学到的...
CSS-CC-42-float-3:CSS要点中的布局属性简介
03-28
CSS-CC-42-float-3 CSS要点中的布局属性简介
css中float用法
yuqu1028的博客
06-13 3534
设置两个div1，div2相邻盒子左浮动时，div1与div2在同一行，div2在div1的右侧。但当宽度超过一行的限制时，div2会默认转到div1的下一行。 看代码： 效果如图所示： 此时div1靠近右侧边沿，div2跟随在div1后面当div1设置浮动而div2未设置浮动时，div2会有一部分被div1覆盖掉并且div2占据页面左上角，此时div2是处于标准流之中如图所示： 反之当div1未设置浮动div2设置左浮动，即div1处于标准流，则div2将会另起一行紧贴在div1的下面如图所示：
ES6 - 等一个函数执行完后再执行另一个函数（Promise）
热门推荐
牧码的博客
09-13 1万+
methods: { fetchSourceData(callback) { return new Promise((resolve, reject) => { resolve(this.sourceData = this.$refs.ht.hotInstance.getSourceData()) }) }, ...
CSS - 基于before及after伪元素添加字符
牧码的博客
02-11 9282
前言 就像在电视剧《迷离时空》（The Twilight Zone）中遗失的一集一样，CSS提供的新属性赋予了使用者在内容中添加伪标记的能力。可能听起来会有点奇怪，但这种方法却有着众多的应用场景。例如一个场景是，需要在显示的时候把文本内容放进引号之中，但是同时不想在内容或者主题文件中添加这些引号，显然这样是比较明智的做法。或者你也想通过标签和@标记尝试时下流行的Twitter，例如想要在内容之前......
响应式 - 使视频自适应于屏幕宽度
牧码的博客
02-09 7851
前言 流媒体视频同样可以为响应式的。在HTML5页面中嵌入响应式视频是一件非常简单的事情。如video标签支持百分比的宽度设置，但是问题在于，该方案需要网站主机拥有对应的视频源。如果已经有视频源，那么一切都易如反掌。 不过，使用视频托管网站（如YouTube或Vimeo）比自己托管更具优势。首先，自己的托管服务器可能会受到带宽或磁盘空间的限制。其次，相比于使用自己的托管服务器，使用视频托管...
HTML - 解决 Audio 标签不显示问题
牧码的博客
10-21 7564
H5 的 audio 标签在不设置 controls 这个属性的情况下，那么他会默认的隐藏本身的空间，但是方法还能用。
JS - 阿里云 OSS 文件下载通用办法（支持跨域）
牧码的博客
10-11 7480
// 创建 OSS 客户端对象 createOssClientTemp () { return new Promise((resolve) => { let client = new OSS({ accessKeyId: 'xxx', accessKeySecret: 'xxx', bucket: 'xxx' ...
HTML - Canvas 使用画布实现内侧阴影和外侧阴影
牧码的博客
02-09 4842
前言 本方法也使用画布和JavaScript通过浏览器绘制文本和实现特殊效果。通过画布无法直接实现内侧渐变的阴影效果或插图效果，但是，使用stroke方法可以模拟文本中的内侧阴影。 准备工作 本方法会使用前面章节已经使用过的一段代码。可以从Packt Publishing的网站直接下载这段代码，它与2.3节中的代码是一样的。这段代码可以运行在本地电脑中，不需要任何Web服务器。可以从本...
CSS - H5 Swiper 快速滑动白色闪屏解决方案
牧码的博客
09-05 4538
分析：如图所示，向上滑动时，如果速度足够快，就会出现白色闪屏效果，后来发现其实是背景显示出来的原因。 解决：只要把背景色改成和主题色近似的颜色即可。 ...
css float
最新发布
08-19
CSS中的float属性用于控制元素在布局中的浮动效果。具体来说，float属性可以设置为left、right或none。其中，left表示元素向左浮动，right表示元素向右浮动，none表示元素不进行浮动（默认值）。<span class="em">1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

放羊的牧码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值