浮动float一般跟left或是right:

特性:

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

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

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

表现:

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

2,浮动不会超越到padding;

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

例子:

输出是:

在加上

.ti,.t2{

  1. 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. docker启动centos容器后如何用putty连接

    在前面的文章中,我提到过,win10 docker启动容器时,只有配置了宿主机和docker容器的端口映射,外部应用才能访问到容器中的服务,比如映射到Nginx的80端口.现在我将宿主机的某个端口映射 ...

  2. Lightoj 1017 - Brush (III)

    1017 - Brush (III)    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Sam ...

  3. [QT开发小结]LNK1104: cannot open file ‘gdi32.lib’ 解决方法

    1.环境变量 : Path = ;C:\Program Files (x86)\Microsoft SDKs\Windows\v7.1A\Bin; 添加变量: INCLUDE = C:\Program ...

  4. 以太坊 EVM内交易执行分析(二)

    接着上次的分析,分析一下run方法是如何执行智能合约的.至于以太币的交易,在上一篇中,已经由分析的那两个函数完成了: 合约的运行是从run开始的,go-ethereum/core/vm/evm.go  ...

  5. [学习笔记]dsu on a tree(如何远离线段树合并)

    https://www.zybuluo.com/ysner/note/1318613 背景 这玩意来源于一种有局限性的算法. 有一种广为人知的,树上离线维护子树信息的做法. (可以参照luogu360 ...

  6. Ubuntu midi 播放

    One of the simplest methods to play a midi file in Ubuntu is to install timidity. sudo apt-get insta ...

  7. ChartCtrl源码剖析之——CChartAxis类

    CChartAxis类用来绘制波形控件的坐标轴,这个源码相对较复杂,当初阅读的时候耗费了不少精力来理解源码中的一些实现细节. CChartAxis类的头文件. #if !defined(AFX_CHA ...

  8. hdu4815 概率问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4815 好久没写dp了..最开始题意都理解错了, 哎!!我现在很饿也很困!! AC代码: #includ ...

  9. bzoj 4195: [Noi2015]程序自动分析【并查集】

    等于有传递性,所以hash一下把等于用并查集连起来,然后再判断不等于是否合法即可 #include<iostream> #include<cstdio> #include< ...

  10. bzoj 3779: 重组病毒【LCT+线段树维护dfs序】

    %.8lf会WA!!%.8lf会WA!!%.8lf会WA!!要%.10lf!! 和4817有点像,但是更复杂. 首先对于操作一"在编号为x的计算机中植入病毒的一个新变种,在植入一个新变种时, ...