css浮动布局，浮动原理，清除(闭合)浮动方法
本人博客：查看文章
- 对附近的元素布局造成改变，使得布局混乱
- 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征
- 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度），下面用图来说明一下高度坍塌：
<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>
<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;
}
以上写出个人对浮动的理解，如有错误，欢迎指出
作者：Ry-yuan
如需转载请标明出处：原文地址：http://www.cnblogs.com/Ry-yuan/p/6816290.html
css浮动布局，浮动原理，清除(闭合)浮动方法的更多相关文章
- CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
css之浮动布局 本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...
- [转]CSS网页布局：div水平居中的各种方法
http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...
- IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世
https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- css 浮动布局，清除浮动
浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...
- CSS 教程 - 闭合浮动元素
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...
- 前端布局常见IE6 bug的解决方法，清除浮动的几种方法以及各自的优缺点
相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...
随机推荐
- 在SSRS的每一页重复显示table header
现在在做一个关于SSRS报表展示的项目,但是我困顿在如何在table的每一页让table header重复显示.因为我在table属性中勾选了"Report header columns o ...
- 头文件limits—各个类型的数据的范围
要想知道各个类型的数据如int.float.double.long等所能表示的范围,可以加上头文件<limits>,这些类型的范围都在类numeric_limits中定义了的. 类模板:t ...
- JAVA-Servlet-ServletConfig 与 ServletContext 的区别
什么是ServletConfig? Servlet容器初始化一个servlet对象时,会为这个servlet对象创建一个servletConfig对象.在servletConfig对象中包含了serv ...
- JavaScript复习之--javascript数据类型隐式转换
JavaScript数据类型隐式转换.一,函数类 isNaN() 该函数会对参数进行隐式的Number()转换,如果转换不成功则返回true. alert() 输出的内容隐式的 ...
- 基于模糊聚类和最小割的层次化网格分割算法（Hierarchical Mesh Decomposition）
网格分割算法是三维几何处理算法中的重要算法,具有许多实际应用.[Katz et al. 2003]提出了一种新型的层次化网格分割算法,该算法能够将几何模型沿着凹形区域分割成不同的几何部分,并且可以避免 ...
- Synchronized的用法
synchronized是Java中的关键字,是一种同步锁.它修饰的对象有以下几种: 1. 修饰一个代码块,被修饰的代码块称为同步语句块,其作用的范围是大括号{}括起来的代码,作用的对象是调用这个代码 ...
- suse安装svn服务端和客户端的使用
suse安装svn服务端 一. 安装服务端 配置网络安装源(suse11sp1为例) 新建11.1.repo11.1为软件源名称,可自定义文件并添加如下内容后保存 linux-e0xg:/etc/zy ...
- 维护Study
##老师发了一个study来让我们纠错维护,整个软件是日程管理系统,分为欢迎界面,登录 注册界面,提醒界面添加日程界面,还有个人中心等.一些主要代码老师让我们把缺失部分去维护.首先我们读一下主要代码# ...
- C#中ListView易错的方法
现在有一个ListView(lv1),有2列. ListViewItem lvi = new ListViewItem(); lvi.Text = "语文"; lvi.SubIte ...
- Git 远程分支的pull与push
Git 远程分支的pull与push 远程分支信息查看 git branch -r #查看远程分支 git branch -a #查看所有分支,本地和远程 git remote show [remot ...