前言:在我们写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元素高度),下面用图来说明一下高度坍塌:

       

5.清除浮动与闭合浮动
    先说说我个人的理解:我将解释一下我理解的闭合浮动与清除浮动
    清除浮动:使用clear元素清除外面浮动,解决外面浮动对自己的影响
    闭合浮动:当前块级中,其子元素使用了浮动,会给当前块内部和块外部的布局带来影响,所以将当前块中的浮动闭合,能将影响最大化清除。举个例子:

    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 进行浮动

图三:区分清除浮动与闭合浮动(个人理解:在外面解决问题,内部问题未解决)
清除浮动:对box2使用:clear:both

图四:闭合浮动(在内部解决问题:同时解决外部问题)
闭合浮动:对box1使用overflow:hidden(其中一种方式,后面还有更好的方式)
因此我更愿意称其为闭合浮动:其实也可以叫清除浮动,不过我就是觉得闭合浮动比较形象。
6.闭合浮动方法(常见的几个方法):既然浮动带来这些不利的影响,我们就要想办法清除它。
其一:通过在浮动元素的末尾添加一个空元素,设置 clear:both属性;
缺点:成本太高,额外添加了一个元素,维护困难
<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>
其二:通过设置父元素 overflow 或者display:table 属性来闭合浮动,给box1添加overflow:hidden
 
 
其三(推荐):使用伪元素:after,下面是代码,给box1添加上clearfloat这class即可
/*适配ie6*/
.clearfloat{
zoom:;
}
.clearfloat:after{
display:block;
height:;
content:"";
clear:both;
visibility:hidden;
}

CSS float详解的更多相关文章

  1. 此博客使用的CSS样式详解!

    此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...

  2. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  3. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  4. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  5. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  6. CSS浮动属性Float详解

    什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在 ...

  7. CSS中详解hight属性

    目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...

  8. 转:CSS圆角详解

    CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...

  9. CSS长度单位详解

    序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...

随机推荐

  1. Ribbon学习笔记

    微服务的概念: Ribbon默认的是轮询的算法:   @LoadBalanced @EnableEurekaClient Irule是根据 Ribbon默认(轮询)的7中负载均衡的算法: 修改默认的R ...

  2. IdentityServer4 学习二

    进入identityserver4的官网:https://identityserver.io/ 找到文档 从overview下开始按照官方文档练习: 安装自定义模板 dotnet new -i Ide ...

  3. 虚拟机性能监控与故障处理工具(深入理解java虚拟机三)

    JDK自带的工具可以方便的帮助我们处理一些问题,包括查看JVM参数,分析内存变化,查看内存区域,查看线程等信息. 我们熟悉的有java.exe,javac.exe,javap.exe(偶尔用),jps ...

  4. 【转】MySQL中EXISTS的用法

    原文链接:https://www.cnblogs.com/qlqwjy/p/8598091.html 比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,Compan ...

  5. Java中XML的四种解析方式(一)

    XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析的方式都是一样的,只不过实现的语法不同而已. XML文档以层级标签的 ...

  6. 学习RadonDB源码(三)

    1. 所谓第四代语言 SQL是一种典型的第四代语言,即4GL,这种语言的突出特点是编写者不需要关注怎么做,只需要告诉系统我要什么就可以. 虽然4GL是这样的一种语言,大大简化了编写者的编写难度,其实底 ...

  7. Arm-Linux 移植 mtd-utils 1.x

    有关文章:<mtd-utils 的 使用> 背景: 关于在公司的生产环境有关.不希望每次都在uboot下面做nand flash 的烧写:也觉得使用U盘升级的方法比较慢,而且有关的驱动不是 ...

  8. SSM整合所需的maven配置文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  9. App客户端性能测试点总结

    一.内存 测试范围1. 空闲状态下的应用内存消耗情况2. 中等规格状态下的应用内存消耗情况3. 满规格状态下的应用内存消耗情况4. 应用内存峰值情况5. 应用内存泄露情况6. 应用是否常驻内存7. 压 ...

  10. RabbitMQ 应用一

    (百度百科)MQ全称为Message Queue,消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消息传递指的 ...