CSS——灵活布局 float (浮动属性)
目录
浮动概述
浮动定位
float属性
clear属性
float与overfloat
第一部分
1. 浮动概述
浮动定位是指(特点)
- 将元素排除在普通流之外,即元素将脱离标准文档流
- 元素将不在页面占用空间
- 将浮动元素放置在包含框的左边或者右边
- 浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
- 经常使用它来实现特殊的定位效果
第二部分
2. 浮动定位
请看上图,左边的三个框是在标准文档流中,由于自身都是块级元素(独占一行)所以是之上而下排列的,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘;这边由于浮动元素不占用页面空间,所以框2、3往上移动。
再请看上图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如上图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。
要注意以下几点:
1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。
2、 浮动元素后边的非浮动元素显示问题。
3、 多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。(最后一幅图所示的特殊效果)
4、子元素全为浮动元素的元素高度自适应问题。(三种方法来解决)
第三部分
3. float属性
值 | 描述 |
默认值: | none |
继承性: | no |
版本: | css1 |
JavaScript: | object.style.cssFloat=”left” |
可能的值:
left | 元素左浮动 |
right | 元素右浮动 |
none | 默认值。元素不浮动,并且会显示在其在文本中出现的位置 |
inherit | 规定应该从父元素继承float属性的值 |
注释:浏览器的支持性:所有主流浏览器都支持float属性
第四部分
4.clear属性
定义和用法:
clear 属性规定元素的哪一侧不允许其他浮动元素。如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
值 | 描述 |
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左右两侧均不允许浮动 |
none | 默认值。允许浮动出现在两侧 |
inherit | 规定应该从父元素继承clear属性的值 |
CSS——灵活布局 float (浮动属性)相关推荐
- html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- html 为什么ul不撑开,给li设置float浮动属性之后,无法撑开外层ul的问题。
以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的. 给li设置float浮动属性之后,无法撑开外层ul的问题. ul{ border: 1px solid #000; width: 20 ...
- CSS float浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. float:left :介绍float为 left 时的布局方式. float ...
- Css margin 和 float浮动
1.浮动: 定义: 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思.它有四个值 none: 表示不浮动,默认 right:表示右浮动 left: 表示左浮动 f ...
- CSS 学习-1. Float(浮动)
前言 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),用在图片附近可以实现文字环绕的效果,也可以使用在布局上. Float 浮动 什么是浮动?浮 ...
- css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称 在css表的 ...
- 03、css float 浮动属性
一.相关概念介绍 1.文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 2.浮动层 给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧 ...
- CSS中,float浮动的理解
浮动什么意思呢,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢 <div style="width:100px;">1111 ...
最新文章
- 无头结点单链表的逆置_单链表的逆置(不带头结点)
- c++ 数据类型转换笔记
- MATLAB基本操作(六):矩阵操作的相关函数
- boot lib分离 spring_SpringBoot+MyBatis+MySQL读写分离(实例)A
- HTTP VS RPC
- VTK:可视化之TransformActorCollection
- 注意!在subList生成子列表之后,一定不要随便更改原列表
- http使用post上传文件时,请求头和主体信息总结
- JavaScrip入门-变量计算%函数
- garch预测 python_数据科学方面的Python库,实用!
- git 小乌龟 更新分支_git常用操作
- 飞龙的程序员书单 – 其它
- 用jdbc操作mysql 实现注册功能_JDBC链接Mysql数据库---实现登陆注册功能
- idea 包存在提示不存在
- 服务器修改开机启动项,启动项设置_服务器开机启动项
- 计算机毕业设计Java大学生科技创新项目管理系统(源码+系统+mysql数据库+lw文档)
- 分享“我是如何实现财务小自由的”
- Android 扫码枪 读取(外接键盘读取)
- 计算机组装与维护毕业论文范文,计算机应用毕业论文 计算机组装与维护
- windows terminal使用管理员权限打开