float属性详解
内容:
1.block与inline复习
2.float介绍
3.float作用
4.清除浮动
1.block与inline复习
1 block元素是独立的一块,独占一行
2 多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度
3 block元素可以设置width、height、margin、padding属性;
4
5
6 inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
7 inline元素其宽度随内容而变化。inline元素设置width、height属性无效
8 inline元素的margin和padding属性:
9 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果
10 竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
11
12
13 常见的块级元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
14 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
2.float介绍
什么是浮动:浮动核心就一句话,浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。重要的事情请默念3次
浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示:
实现代码:
HTML:
<div class="float-test">
<p>
<img class="img-left" src="img/user.jpg" alt="用户头像" width="150px" height="150px">
This is some text.This is some text.This is some text.This is some text.、、、
</p>
</div> CSS:
p{
text-indent: 2em;
}
.img-left{
float: left;
margin-left: 7px;
}
3.浮动作用
后来开发者发现浮动的元素可以设置宽高并且可以内联排列,是介于inline
和block
之间的一个神奇的存在,在inline-block
出来之前,浮动大行其道。直到inline-block
出来后,浮动也有它自己独特的使用场景
浮动的特性总结如下:
- 浮动会脱离文档
- 浮动可以内联排列
- 浮动会导致父元素高度坍塌
(1)浮动会脱离文档
浮动会脱离文档,也就是说浮动不会影响普通元素的布局;元素浮动之后会忽略其他元素浮动起来直到遇到父元素或已经浮动的元素,浮动的元素可能会盖住未浮动的元素如下所示:
(2)浮动可以内联排列
浮动会向左/向右浮动,直到碰到另一个浮动元素为止,这是浮动可以内联排列的特征。也就是说,浮动可以设置宽高,并且能够一行多个,是介于block
和inline
之间的存在,浮动内联排列如下所示:
(3)浮动会导致父元素高度坍塌
浮动是脱离文档流,父元素便无法控制浮动的元素,如果父元素中的子元素全部浮动将导致父元素高度坍塌,这个问题要通过清除浮动来解决
4.清除浮动
(1)clear语法
1 clear语法:
2 clear : none | left | right | both
3 取值:
4 none : 默认值。允许两边都可以有浮动对象
5 left : 不允许左边有浮动对象
6 right : 不允许右边有浮动对象
7 both : 不允许有浮动对象
8 但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素
9 如果一个元素的右侧有一浮动对象,而这个元素设置了不允许右边有浮动对象,即clear:right,则这个元素会自动下移一格,达到本元素右边没有浮动对象的目的。
(2)清除浮动
给浮动的元素的父元素加上以下两段代码中任意一段即可:
// 现代浏览器clearfix方案,不支持IE6/7
.clearfix:after {
display: block;
content: " ";
clear: both;
} // 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
display: block;
content: " ";
clear: both;
}
.clearfix{
*zoom:;
} // 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
display: block;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom:;
}
float属性详解的更多相关文章
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- css float属性详解
定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...
- float 属性详解
当前元素分类(float:left) 下一个紧邻元素分类(不含float) 结论 块级元素(a) 块级元素(b) b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面. 内联元素(b) b会紧跟 ...
- (转)ie -ms-interpolation-mode: bicubic 属性详解
ie -ms-interpolation-mode: bicubic 属性详解 img { -ms-interpolation-mode: bicubic; } 这个在做实时缩放图片.缩略图的时候用 ...
- CSS2.1SPEC:视觉格式化模型之width属性详解(下)
本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...
- odoo项目结构参数属性详解
1.基础文件及目录结构 在认识odoo ORM框架前,先介绍一下odoo中模块目录结构. data:存放模块预制数据i18n:存放国际化文件models:存放模型等py代码security:存放权 ...
- C#类、对象、方法和属性详解
C#类.对象.方法和属性详解 一.相关概念: 1.对象:现实世界中的实体(世间万物皆对象) 2.类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装 继承 多态 4.对象的三要素:属性 ...
- z-index属性详解
z-index属性详解 目录 z-index属性详解 一.定义和用法 二.代码 三.效果图 一.定义和用法 z-index属性指定一个元素的堆叠顺序,也就是z轴 position属性定义的是x轴和y轴 ...
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
随机推荐
- Mac系统常用快捷键
Mac系统常用快捷键,摘录自: https://www.cnblogs.com/ios8/p/Mac-OSX-keyword-cmd.html 以下为常用的快捷键 ctrl+shift 快速放大doc ...
- X11 fluxbox窗口管理器
/********************************************************************************* * X11 fluxbox窗口管理 ...
- shell 脚本实战笔记(11)--Mysql在linux下的安装和简单运维
前言: linux中安装mysql以及配置的管理, 基础的运维和管理还是需要会一些的. 这边作下笔记, 以求天天向上(^_^). 安装流程:*). 安装mysql-server1). 借助yum检索相 ...
- SUST OJ 1671: 数字拼图
1671: 数字拼图 时间限制: 1 Sec 内存限制: 16 MB提交: 34 解决: 19[提交][状态][讨论版] 题目描述 拼图游戏即在任意一个N*N(N>1)的拼图中,会把一张完整 ...
- 新建Android一个项目-菜鸟篇
①打开Eclipse,单击菜单栏的“File”->把鼠标光标移动到“New”->在弹出的列表框中,如果直接能看到“Android Applicaion Project”选项项,则直接单击此 ...
- Zoj 3529 A Game Between Alice and Bob 数论+博弈Nim 快速求数中有多少个素数因子
本题涉及博弈论中的Nim游戏博弈. Nim游戏博弈详解链接: http://www.cnblogs.com/exponent/articles/2141477.html 本题解题报告详解链接: htt ...
- day3 自动部署安装软件到其他的机器设备上
PS:原理是在本机创建boot.sh指向每一台主机,使用脚本命令去执行,然后就会自动安装软件 PS:boot.sh里面放着1.免密登录 2.发送每台机器install.sh 这个install.sh中 ...
- stenciljs 学习九 使用jsx
可以使用jsx 方便组件的开发 基本格式 主要是render 函数 class MyComponent { render() { return ( <div> <h1>Hell ...
- Mac OS X 10.9.2 配置 jdk1.8.0_05 环境变量
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/gcvdsvb/article/details/24543543 首先到 oracle 站点下载 ss ...
- Angular 4 表单校验1
1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用户名: ...