【前端】CSS : float

介绍

float属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。

注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

浮动元素的浮动位置不能超过包含块的内边界

基本属性

  • none:不进行浮动(默认)
  • left:浮动在其所在的块容器左侧
  • right:浮动在其所在的块容器右侧

使用

介绍其实很简单,怎样用好它就需要实践了。

show me code !!!

浮动实验

下面通过一步步的实验,来学习并了解float

先来三个box

样式就不贴了

<div>
    <div class="box box1">1</div>
    <div class="box box2 ">2</div>
    <div class="box box3 ">3</div>
</div>

效果:正常的文档流

实验1:为box2添加浮动

.float-right {
    float: right;
}
<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 ">3</div>
</div>

效果:为box2添加 float: right;后,可以看到box2跑到右边去了,box3紧跟在box1下面。

疑问:box2和box3为什么不在一条水平线上?(为什浮动后有间隙?) 原因:边界重叠;块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。浮动元素和绝对定位元素的外边距不会折叠。详情

实验2:box2、box3都添加浮动

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-right">3</div>
</div>

效果:先是box2向右浮动,然后box3紧跟着box2向右浮动。

实验3:多个元素浮动,且超出屏幕宽度

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-right">3</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-right">3</div>
</div>

效果:当下个浮动元素发现空间不够时会换行

实验4:左右浮动

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-left">3</div>
</div>

效果1:空间足够时,分别位于屏幕两侧

效果2:空间不足时,位于下发的元素会另起一行

浮动的元素不会“干”在一起,『手动滑稽』

清除浮动

我们知道,一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。要解决这样的问题,我们就是要使用清除浮动——clear

clear属性 指定一个元素是否可以在它之前的浮动元素旁边,或者必须向下移动(清除浮动) 到这些浮动元素的下面。

  • none:默认值。允许浮动元素出现在两侧
  • left:在左侧不允许浮动元素
  • right:在右侧不允许浮动元素
  • both:在左右两侧均不允许浮动元素。

:上面提到仅box2浮动时,box3会紧跟在box1下方,可能被box2盖住。如下图:

如果不想被box2盖住,怎么怎么办?

解决办法:为box3添加clear属性

.float-clear-right {
    clear: right;
}
<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-clear-right">3</div>
</div>

效果:box3添加清除右浮动后,不受右浮动的影响,回到原来的位置了

文字环绕

通过float实现一个文字环绕效果,很简单

例:

.float-left {
    float: left;
}
<div>
    <img class="float-left" src="../image/image1.png" style="height: 100px; width: 100px;">
    <p >
        Java是世界上最好的语言。Java是世界上最好的语言。
        Java是世界上最好的语言。Java是世界上最好的语言。
        Java是世界上最好的语言。Java是世界上最好的语言。
        Java是世界上最好的语言。Java是世界上最好的语言。</p>
</div>

效果

文字环绕

很简单,看效果挺好的。 然而,看似简单的背后,往往“暗藏杀机”

为了方便看效果,为元素添加背景色

遇到问题

<p>中的文字内容很多的时候,很健康。如果文字内容少点?

你以为的结果是这样:

实际效果却是这样:

这就搞笑了,浮动的元素<img>超出了父元素<div>,飘在上面了。 如果在后面加一个div会怎么样?

<div class="box">box</div>

效果:后续的布局顶上来了,且box中的文本还被挤过来了。

跟上面一样,也是高度塌陷问题 所以,清除浮动后,就能解决这个问题

解决办法1:清除浮动 效果

这个问题是解决了,刚缓口气,又发现了另一个问题margin-top不生效。(准确来说是小于一定数值不生效)

:为box添加margin-top

{ margin-top: 20px }

效果:没有任何效果,margin-top:20px没有生效

这种情况下margin-top失效的原因

解决办法2:BFC BFC全称block formatting context,中文为"块级格式化上下文"。BFC元素是不可能发生margin重叠的,另外,BFC元素也可以用来清除浮动的影响。 所以:BFC不仅可以处理浮动的影响,还能处理margin重叠的问题

BFC的触发条件有很多,其中之一:overflow的值为auto、scroll或者hidden

应用:为外层<div>添加overflow:hidden

<div style="overflow: hidden">
    <img ...>
    <p ...></p>
</div>

效果:外层div的高度也有了,box的margin-top也生效了

只要满足下面任意一个条件就会触发BFC: ● html根元素; ● float的值不为none; ● overflow的值为auto、scroll或者hidden; ● display的值为table-cell、table-caption和inline-block中的任何一个; ● position的值不为relative和static;

参考

详解CSS float属性 CSS浮动float详解 【前端Talkking】CSS系列——CSS深入理解之float浮动 https://developer.mozilla.org/zh-CN/docs/CSS/float http://www.runoob.com/css/css-float.html

有错误之处,感谢指出,接收批评

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子昭的博客

rem结合css3原生函数, 完成移动端各类屏幕适配

但手机的屏幕是大小不一的, 在iPhone8上展示的很好的效果, 在iPhone5s上可能就完全走了样, 为了在不同尺寸的屏幕上,都有很好的展示效果, 我们需要...

16420
来自专栏bamboo前端学习记录

css常用布局

执行结果链接描述 在header 和footer上再包裹一层div,在外层的div上添加背景颜色,设置内层layout上设置左右margin:auto,就出现了...

45410
来自专栏bamboo前端学习记录

浏览器兼容

产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先) 成本的角度 (有无必要做某件事)

30650
来自专栏bamboo前端学习记录

css基本样式1(7.1)

2.盒模型 盒模型内容的width、height、padding内边距、border、margin外边距。

16610
来自专栏明天依旧可好的专栏

知识点讲解四:selenium教程

环境: Python3.6.5 编译器: Sublime Text 3 联系方式: ke.zb@qq.com 第三方库: seleniu

15620
来自专栏bamboo前端学习记录

jquery 属性&CSS操作 笔记

这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value...

10320
来自专栏bamboo前端学习记录

css 元素居中

前提:没有设置高度,高度由内容撑开。块级元素如果设置了高度,就不知道如何设置padding的数值 demo

45920
来自专栏bamboo前端学习记录

vue笔记5 vueJS中的内置指令

v­-cloak一般与display:none进行结合使用 作用:解决初始化慢导致页面闪动的最佳实践

14110
来自专栏bamboo前端学习记录

v­bind以及class与style的绑定-vue笔记4

在数据绑定中,最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动 态绑定

16820
来自专栏bamboo前端学习记录

外边距合并

detail设置margin为30px,header设置margin为30px,结果两个相邻元素之间的间距发生了合并

10320

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励