浮动float一般跟left或是right:

特性:

1,包裹性:浮动文本类型时,需要指定宽度width,如果不指定,就会折叠到最小宽度;

2,浮动会影响别的元素;

3,子级浮动,会导致父级高度塌陷。

表现:

1,浮动会脱离文档流(不受块级控制);

2,浮动不会超越到padding;

3,行内元素浮动后自动变成块级。

例子:

输出是:

在加上

.ti,.t2{

float:left;

}

变为:

这是个很简单的例子,但是在实践中这个大有用处!

CSS中的趣事之float浮动的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  3. css中常见几种float方式以及倒计时(刷新页面不清)

    css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...

  4. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  5. CSS中的position和float

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  6. (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  7. css中:overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  8. 关于css中float的理解

    感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...

  9. 【Web】CSS中的浮动float

    CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...

随机推荐

  1. Koa2学习(三)GET请求

    Koa2学习(三)GET请求 GET请求是前后端交互最常用的请求之一,常常用来进行查询操作. 那么Koa是如何接收并处理GET请求呢? 创建一个服务 // 引入Koa const Koa = requ ...

  2. jQuery 1.x and 2.x , which is better?

    1. jQuery 1.x和2.x的区别 或者可以说是jQuery 2.x有什么新特征? jQuery官方发布2.x原话 不再支持IE6/7/8,如果在IE9/10里只用“兼容性视图”模式也将会受到影 ...

  3. 滑动窗体的最大值(STL的应用+剑指offer)

    滑动窗体的最大值 參与人数:767时间限制:1秒空间限制:32768K 通过比例:21.61% 最佳记录:0 ms|8552K(来自 ) 题目描写叙述 给定一个数组和滑动窗体的大小.找出全部滑动窗体里 ...

  4. Linux进程间通信——使用信号量【转】

    本文转载自:http://blog.csdn.net/ljianhui/article/details/10243617 这篇文章将讲述别一种进程间通信的机制——信号量.注意请不要把它与之前所说的信号 ...

  5. bzoj4593: [Shoi2015]聚变反应炉

    这道题的难点其实是在设DP方程,见过就应该会了 令f0,i表示先激发i的父亲,再激发i,把i的整棵子树都激发的最小费用 f1,i表示先激发i,再激发i的父亲,把i的整棵子树都激发的最小费用 设x,y为 ...

  6. 【191】◀▶ Powershell 命令集 Cmdlets

     Powershell 命令集 cmdlets cmdlets是Powershell的内部命令,cmdlet的类型名为System.Management.Automation.CmdletInfo,包 ...

  7. bzoj 1927 [Sdoi2010]星际竞速【最小费用最大流】

    果然还是不会建图- 设\( i \)到\( j \)有通路,代价为\( w[i][j] \),瞬移到i代价为\( a[i] \),瞬移到i代价为\( a[j] \),逗号前是流量. 因为每个点只能经过 ...

  8. [Swift]扩展String类:实现find()查找子字符串在父字符串中的位置

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. Elasticsearch 2.3.2 安装部署

    先按照http://blog.csdn.net/love13135816/article/details/51690280这个教程安装, 不过后面的IK分词器安装部分有问题. 所以中文分词器插件的安装 ...

  10. Dexposed:android免Root无侵入Aop框架

    在网上看到了阿里推出的一个android开源项目,名为Dexposed, 是一个Android平台下的无侵入运行期AOP框架.旨在解决像性能监控.在线热补丁等移动开发常见难题,典型使用场景为: AOP ...