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.实际应用 导航效果 ...
随机推荐
- HEX文件格式学习笔记
这也是一篇学习摘抄:原文地址:http://blog.csdn.net/syrchina/article/details/7004998 为了编写一个可以按照自己的要求进行ISP的程序, ...
- Jquery与Dom对象相互转化
Jquery与Dom对象相互转化 jQurey对象和DOM对象的相互转换 在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格.如果我们获取的对象是jQuery对象,那么我们 ...
- Webdriver中关于driver.navigate().to()和driver.get()使用的区别
先是有一个父页上button弹开一个子页,总共有4个子页,必须前一个页上的必填信息录完,才能在这个页面触发下一个子页. 用driver.navigate().to(baseUrl2),直接跳转到第2个 ...
- ssh 无密码互通
节点n1 n2 n3 互通 第一步:n1->n2互通 admin@n1 > ssh-keygen -d
- 【转】Android 6.0 Marsmallow BLE : Connection Parameters
原文网址:http://stackoverflow.com/questions/34617061/android-6-0-marsmallow-ble-connection-parameters Th ...
- bzoj4033 [HAOI2015]树上染色——树形DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4033 树形DP,状态中加入 x 与父亲之间的边的贡献: 边权竟然是long long... ...
- Java-Runoob-高级教程-实例-字符串:14. Java 实例 - 连接字符串
ylbtech-Java-Runoob-高级教程-实例-字符串:14. Java 实例 - 连接字符串 1.返回顶部 1. Java 实例 - 连接字符串 Java 实例 以下实例演示了通过 &qu ...
- 使用maven新建类目录是,报错The folder is already a source folder.的解决办法
转自:https://www.cnblogs.com/loger1995/p/6539139.html 我们有时候新建一个webapp的maven项目时,生成的目录结构是这样子的: 缺少maven规范 ...
- ubuntu下为thunderbird添加邮件提醒功能(转载)
转自:http://blog.csdn.net/zhangt85/article/details/9154525 1.“工具”-->“附件组件” 2.搜索“new_mail_attention” ...
- c语言程序设计案例教程(第2版)笔记(四)—指针、分配存储空间、文件
零散知识点: 指针类型:每个变量占用的首单元地址称为这个变量的存储地址. “&”为“取地址运算符”.格式:& 变量名.功能:返回指定变量的存储地址. “*”为“取内容运算”.格式:* ...