CSS float详解
前言：在我们写CSS样式的时候，float,position,display,overflow这几个关键字用得比较多。
弄清楚他们之间的原理，我们可以更高效的写出我们想要的布局。
作者：Ry-yuan
原文地址：http://www.cnblogs.com/Ry-yuan/p/6816290.html
一、float
1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
4.浮动的影响：
对附近的元素布局造成改变，使得布局混乱
浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征
因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度），下面用图来说明一下高度坍塌：
ex:
<style type="text/css">
.box1{
width: 200px;
border: 2px solid #0f0;
/*overflow: hidden;*/
}
.box1 .child-1{
float: left;
height: 100px;
width: 100px;
background: #fd0;
}
.box1 .child-2{
float: left;
height: 100px;
width: 100px;
background: #fba;
}
.box2{
width: 200px;
height: 150px;
border: 2px solid #00f;
/* clear: both; */
}
</style>
<body>
<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
</div>
<div class="box2"></div>
</body>
图一：原始图
图二：child-1 和 child-2 进行浮动
<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
<div style="clear: both;"></div>
</div>
<div class="box2"></div>
/*适配ie6*/
.clearfloat{
zoom:;
}
.clearfloat:after{
display:block;
height:;
content:"";
clear:both;
visibility:hidden;
}
CSS float详解的更多相关文章
- 此博客使用的CSS样式详解！
此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
- CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- CSS浮动属性Float详解
什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在 ...
- CSS中详解hight属性
目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...
- 转：CSS圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
- CSS长度单位详解
序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...
随机推荐
- 026 Android 带不同类型条目的listview(纯文本类型的条目，图片+文字类型的条目)+读取内存空间、手机进程信息+常驻悬浮框
1.目标效果 带不同类型条目的listview(纯文本类型的条目,图片+文字类型的条目)+常驻悬浮框 2.页面布局文件 (1)activity_process_manager.xml <?xml ...
- [转帖]Nginx Image Module图片缩略图 水印处理模块
Nginx Image Module图片缩略图 水印处理模块 https://www.cnblogs.com/jicki/p/5546972.html Nginx Image Module图片缩略图 ...
- Struts笔记2
Struts2-配置文件result元素 作用:为动作指定结果视图 name属性:逻辑视图的名称,对应着动作方法的返回值.默认值是success type属性:结果类型,指的就是用什么方式转到定义的页 ...
- 长乐培训Day7
T1 删除 题目 [题目描述] 现在,我的手上有 n 个数字,分别是 a1,a2,a3,...,an. 我现在需要删除其中的 k 个数字.当然我不希望随随便便删除,我希望删除 k 数字之后,剩下的 n ...
- elk 流程图
ELK流程图 单纯使用ElK实现分布式日志收集缺点: 1.logstash太多了,扩展不好. 2.读取IO文件,可能会产生日志丢失 3.不是实时性 这时候就需要引入 kafka. kafka基于主题模 ...
- Redis 如何与数据库事务保持一致
考虑一个问题,redis 如何 与 数据库保持一致性的问题. 举栗子:如果我们在开发过程中遇到这样的一种情况,我们删除 redis中token 的同时 也需要修改数据库中 储存的 token 的状态为 ...
- Task 开始 停止
注意点:需要将每个线程的 MemoryCacheManager 保存,这里我保存在缓存中,需要取消时根据缓存key值取出 MemoryCacheManager //开始Task1 private vo ...
- 用 cabarc.exe 制作CAB(带子目录)
原文转自 https://blog.csdn.net/crab530143383/article/details/17308623 先下载cabarc.exe,makeCAB 假设cabarc.exe ...
- Mybatis之日志工厂
思考:我们在测试SQL的时候,要是能够在控制台输出 SQL 的话,是不是就能够有更快的排错效率? 如果一个 数据库相关的操作出现了问题,我们可以根据输出的SQL语句快速排查问题. 对于以往的开发过程, ...
- span标签中显示固定长度，超出部分用省略号代替，光标放到文字上显示全部
在span中实现显示某段内容,固定其长度,多余部分用省略号代替,这样就用到html的title属性: 如:<span title="value"></span&g ...