css float布局
前言
float 布局综合整理
文章目录
- 前言
- 1. CSS 布局的三种机制
- 2. float布局的作用
- 3. 浮动布局的三个特性
- 4. 浮动的应用
- 5. 清除浮动
- 1).额外标签法(隔墙法)
- 2).父级添加overflow属性方法
- 3).使用after伪元素清除浮动
- 4).使用双伪元素清除浮动
- 6. @拓展
1. CSS 布局的三种机制
css 提供了 3 种机制 来设置盒子的摆放位置,分别是普通流,浮动和定位
- 普通流(标准流)
- 块级元素会独占一行,从上向下顺序排列;
- 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;
- 常用元素:span、a、i、em等
- 块级元素会独占一行,从上向下顺序排列;
- 浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
- 定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位,特别是后面的 js 特效。
2. float布局的作用
- 让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段。(核心目的)
- 可以实现盒子的左右对齐等等…
- 浮动最早是用来控制图片,实现文字环绕图片的效果。
脱离文档流,但不脱离文本流
代码举例:
下面这两个并列的div1
和div2
,默认是在标准流中的:
在此基础之上,如果给div1
增加float: left
属性后,效果如下:
上图中,可以看到,div1
设置为浮动后,会脱离文档流,不会对div2
的布局造成影响;但是div1
不会脱离文本流,它会影响div2
中文字的排列。
其实,这正是 float 属性的作用。float 本身是用来做图文混排、文字环绕的效果。
3. 浮动布局的三个特性
首先在最上面直接说明 float
的特性
- 漂浮在普通流的上面。
float
属性会让盒子漂浮在标准流的上面 - 浮动的盒子,把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置
- 任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。但是元素之间没有空白缝隙
- 浮动元素位置尽量靠上
先统一页面的布局
<body><div class="one">one</div><div class="two">two</div><div class="three">three</div><div class="four">four</div>
</body>
首先要知道,div
是块级元素,在页面中独占一行,自上而下排列
<style>div {width: 100px;height: 100px;text-align: center;line-height: 100px;}.one {background-color: gainsboro;}.two {background-color: aquamarine;}.three {background-color: cornflowerblue;}.four {background-color: gray;}</style>
此时的情况就是我们常说的标准流, 可以看出, 即使在宽度足够的情况下, 各个 div 块级元素独占一行
但是如果我们修改 css 样式, 使得 其中一个 div 发生左浮动
.two {background-color: aquamarine;float: left;}
我们再修改 css 样式, 使得其发生右浮动
在这里,我们就可以解释上面前两条特性了
添加了float属性的元素会漂浮在普通流的上面。
float
属性会让盒子漂浮在标准流的上面
从第一次让 div 开始左浮动时, two 已经脱离了标准文档流, 它以经不占用空间了, three 会上去占用它失去的的空间,重新组成一个流
所有 two 就覆盖了 three
浮动的盒子,把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置
接下来, 我们将前三个 div
使用 float
进行测试
.one {float: left;background-color: gainsboro;}.two {background-color: aquamarine;float: left;}.three {background-color: cornflowerblue;float: left;}.four {background-color: gray;}
结果正如前两条理论一样
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);
如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
4. 浮动的应用
浮动是脱标的,会影响下面的标准流元素
此时,我们需要给浮动的元素添加一个标准流的父亲,这样,最大化的减小了对其他标准流的影响。
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。(主要原因)
准确地说,并不是清除浮动,而是清除浮动后造成的影响
5. 清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。
父级有了高度,就不会影响下面的标准流了
语法:
选择器{clear: 属性值;}
对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
1).额外标签法(隔墙法)
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>或则其他标签br等亦可。
- 优点: 通俗易懂,书写方便
- 缺点: 添加许多无意义的标签,结构化较差。
2).父级添加overflow属性方法
可以给父级添加:
overflow为 hidden| auto| scroll
都可以实现。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
3).使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版,好处是不用单独加标签了
使用方法:
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */
- 优点: 符合闭合浮动思想 结构语义化正确
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
- 代表网站: 百度、淘宝网、网易等
4).使用双伪元素清除浮动
使用方法:
.clearfix:before,.clearfix:after { content:"";display:table;
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}
优点: 代码更简洁
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 小米、腾讯等
6. @拓展
做页面的主导航栏, 建议使用 ul
的 li
里面嵌套 a
标签, 让 a
标签变为块级元素,有利于 seo 优化, 不推荐直接使用大量的 a
标签
可通过京东官网验证
css float布局相关推荐
- CSS Float布局过程
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- css float布局样式的换行问题
使用float布局时候,存在多行数据要换行,出现了换行样式问题: 如图: 第二行的第一个浮动到右边,其他被挤下到第三行 原因: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动的边框为 ...
- Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
- CSS布局—— float布局和flex布局
用什么CSS布局 当需要兼容IE9时,使用float布局:当需要兼容IE9且不需要兼容最新浏览器时,使用flex布局:当不需要兼容IE9.需要兼容最新浏览器时,使用grid布局. float布局 父元 ...
- CSS Float 浮动布局
文章目录 前言 一.Float 布局 二.属性值 三.代码实现 clear 清除浮动 clear 属性值 三.Float 设计初衷与不足 不足 总结 前言 在页面开发的过程中,CSS 页面布局技术允许 ...
- css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局
1.表格布局(不推荐) 父级容器为display:table 表格 子级容器为display:table-cell 一个单元格 特点:在没有特别设置的情况下,子级是自动平分宽度并填满父级的. tabl ...
- CSS 浮动布局放弃float,拥抱flex(详解)
CSS 浮动布局放弃float,拥抱flex(详解) 文章目录 CSS 浮动布局放弃float,拥抱flex(详解) 说明 Flex布局 容器和项目 容器属性 flex-direction属性 fle ...
- 多列网页布局CSS float 属性和 CSS Clear 属性
CSS float 属性 CSS float 属性用于设计多列网页布局.如果你想设计两列或三列的网页布局,你必须在float 属性的帮助下浮动你的 div 元素. div 标签是块级元素,因此,div ...
- CSS float浮动布局
CSS float浮动布局 1. 清除浮动 2. 浮动边界 3. 浮动转换 4. 形状浮动 控制环绕模式 5. 改变元素的显示区域 属性值 选项 说明 left 向左浮动 right 向右浮动 non ...
最新文章
- 基于Go语言来理解Tensorflow
- linux进程间通讯-有名管道
- python sin(x)/x 图像
- 拼多多稳了,字节跳动开发新APP,是谁杀死了淘宝?
- 『设计模式』不看就亏了的设计模式总结
- 前端学习(2558):单文件组件
- Idea 同一工程根据不同配置文件启动、idea 同一工程多实例同时运行
- StarGAN v2: Diverse Image Synthesis for Multiple Domains (多域多样性图像合成)
- Mongodb Geo2d索引原理
- 若依前后端分离集成Mybatis-Plus
- linux tomcat 部署 JCO,JCO连接SAP时tomcat报错
- C++ Beep()演奏简谱的改进以及实现背景音乐
- 用户使用报告_分享短视频最新2020年抖音用户画像报告
- 微信小程序回车键传值
- FDM 3D打印机常见故障列总 挨个排除
- php获取linux服务器CPU、内存、硬盘使用率的实现代码
- iOS-对 iOS app 进行安全加固
- 破解android锁屏密码
- 基于PaddleOCR的数字显示器字符识别
- 基于Python实现的医疗知识图谱的知识问答系统