CSS中的趣事之float浮动
浮动float一般跟left或是right:
特性:
1,包裹性:浮动文本类型时,需要指定宽度width,如果不指定,就会折叠到最小宽度;
2,浮动会影响别的元素;
3,子级浮动,会导致父级高度塌陷。
表现:
1,浮动会脱离文档流(不受块级控制);
2,浮动不会超越到padding;
3,行内元素浮动后自动变成块级。
例子:

输出是:

在加上
.ti,.t2{
float:left;
}
变为:

这是个很简单的例子,但是在实践中这个大有用处!
CSS中的趣事之float浮动的更多相关文章
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- css中常见几种float方式以及倒计时(刷新页面不清)
css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- CSS中的position和float
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- css中:overflow:hidden清除浮动的原理
要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...
- 关于css中float的理解
感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...
- 【Web】CSS中的浮动float
CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...
随机推荐
- instruction set汇总
1 aarch64 它armv8-A架构的一种执行状态,之所以说它是一种执行状态是因为,armv8-A还有aarch32这个执行状态.aarch64是64位执行状态,aarch32是32位的执行状态. ...
- What Is the Linux Lokkit Utility? https://www.lifewire.com/what-is-lokkit-2192255
lokkit: The Lokkit utility attempts to provide firewalling for the average Linux end user. Instead o ...
- YTU 2946: 填空:间接基类就是A
2946: 填空:间接基类就是A 时间限制: 1 Sec 内存限制: 128 MB 提交: 132 解决: 96 题目描述 如下程序所示,D继承自B和C,而B和C均继承自A.根据继承的机制,D的对 ...
- POJ - 1986 Distance Queries(离线Tarjan算法)
1.一颗树中,给出a,b,求最近的距离.(我没考虑不联通的情况,即不是一颗树的情况) 2.用最近公共祖先来求, 记下根结点到任意一点的距离dis[],这样ans = dis[u] + dis[v] - ...
- bzoj 3714 [ PA 2014 ] Kuglarz —— 思路+最小生成树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3714 因为每个杯子下最多一个小球,所以从奇偶性就可以看出有没有球: 询问一段区间,等于知道一 ...
- 【415】C语言文件读写
A program can open and close, and read from, and write to, a file that is defined by the user This i ...
- 【转载】HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role= ...
- 堆与栈(JAVA)——以String str="abc"的深度含义解释
栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 栈的优势是,存取速度比堆要快,仅次于直接位于CPU中的 ...
- python安装教学
1.首先登陆到python的官方网站 1https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3 ...
- Kerberos原理和基础小结
此篇文章仅做Kerberos的基本原理和基本使用做说明,本人对Kerberos了解有限,也是通过大量英文文档中翻译过来, 加上自己对Kerberos的理解所写,本人英文太菜,看文档看的头昏眼花若有写的 ...