css之浮动布局

本人博客：查看文章

 
1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
4.浮动的影响：
  • 对附近的元素布局造成改变，使得布局混乱
  • 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征
  • 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度），下面用图来说明一下高度坍塌：

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

<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;

}

以上写出个人对浮动的理解，如有错误，欢迎指出

作者：Ry-yuan

如需转载请标明出处：原文地址：http://www.cnblogs.com/Ry-yuan/p/6816290.html

 

css浮动布局，浮动原理，清除(闭合)浮动方法的更多相关文章

  1. CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

    css之浮动布局 本人博客:查看文章   1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...

  2. [转]CSS网页布局：div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  3. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  4. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  5. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  6. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  7. css 浮动布局，清除浮动

    浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...

  8. CSS 教程 - 闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...

  9. 前端布局常见IE6 bug的解决方法，清除浮动的几种方法以及各自的优缺点

    相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...

随机推荐

  1. 模拟在内存中的数据库DataSet相关的类

    这篇连着上一篇DataReader相关类. 下面两段话是在msdn官网摘下来:       .NET Framework 数据提供程序是专门为数据操作以及快速.只进.只读访问数据而设计的组件.Conn ...

  2. nodejs npm常用命令 转

    npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. 1.npm install m ...

  3. jQuery中jsonp函数实现

    由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...

  4. WebApi client 的面向切面编程

    .Net的面向切面编程 .Net的服务端应用AOP很常见,在Asp.net MVC与Asp.net WebApi等新框架里到处都有AOP的影子,我们可以把一个服务方法“切”为很多面,日志面.验证面.请 ...

  5. Appium手势密码滑动之Z字形走势（java篇）

    1.直接使用负的偏移量appium会报错,在后面加上moveto(1,1)就行了 2.直接看图说话 废话少说看代码如: List<AndroidElement> element = dri ...

  6. socket bind详解

    http://www.cnblogs.com/nightwatcher/archive/2011/07/03/2096717.html 在最开始接触bind的时候,只是在写基于tcp的server端的 ...

  7. backtracking问题

    backtracking最基础的问题是Subsets,即给定一个数组,要求返回其所有子集. Given a set of distinct integers, nums, return all pos ...

  8. 优雅高效的MyBatis-Plus工具快速入门使用

    目前正在维护的公司的一个项目是一个ssm架构的java项目,dao层的接口有大量数据库查询的方法,一个条件变化就要对应一个方法,再加上一些通用的curd方法,对应一张表的dao层方法有时候多达近20个 ...

  9. goagant：403. That’s an error.

    报错: . That’s an error. Your client does not have permission to get URL / from this server. That’s al ...

  10. Entity Framework技术系列之0：开篇

    小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/shareto ...