float 及 overflow 的理解
1、CSS 盒子模型：
2、float 支持属性：left right none inherit（部分支持）
（1）float 属性影响范围：对紧随其后的块儿级元素起作用。
（2）清除浮动常用方法：在受影响的元素上
（3）对overflow：hidden 的理解
例如：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.wrap{
width: 80%;
margin:0 auto;
}
.content{
background-color: gray;
/*height: 500px;*/
/*overflow: hidden;*/
}
.left{
width: 80%;
height: 300px;
background-color: aqua;
float: left;
}
.right{
width: 10%;
height: 800px;
background-color: yellow;
float: left;
}
.footer{
background-color: red;
}
</style>
</head>
<body> <div class="wrap">
<div class="content">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
footer
</div>
</div> </body>
</html>
（1）浮动后，footer 挤到顶部
（2）parent 加上 overflow:hidden;
- 我们原先的理解是，在一个平面上的浮动，但是通过试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个 属性中的解释，清除浮动是什么意思了。
- 当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个 div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是overflow的含义！
float 及 overflow 的理解的更多相关文章
- 转: CSS中float和clear的理解
float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...
- 简明的例子讲解position:relative、float、overflow:hidden和inline-block
标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...
- CSS.04 -- 浮动float、overflow、定位position、CSS初始化
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right : 设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...
- 利用float与overflow:hidden实现移动端两栏自适应布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- float 的先后顺序 理解流
<!DOCTYPE html><html><head><style> p{float:right;}</style></head> ...
- 关于overflow的理解
overflow会把超出父盒子的部分继续不同修改 在这我只执行一个常用属性值 原始代码如下(未设置overflow前): 执行结果: 设置后运行结果:
- 深入理解和应用Float属性
一.Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度.高度自适应,但可以设置其值. 二.核心解决的问题 文字围绕图片:img标签与多个文本标签 ...
- overflow 在float浮动标签里的作用
overflow可以使浮动元素回归文档流,但是浮动元素却仍然具有浮动的属性 <!DOCTYPE html> <html lang="en"> <hea ...
- overflow 清除浮动
对overflow的理解还停留在“规定当内容溢出元素框时发生的事情”,这种简单的认识上,今天发现overflow还可以清除浮动. <style> .outside{ height:auto ...
随机推荐
- java中char类型转换成int类型的两种方法
方法一: char ch = '9'; if (Character.isDigit(ch)){ // 判断是否是数字 int num = Integer.parseInt(String.valueOf ...
- Python_深浅拷贝
深浅拷贝 ‘copy’和'='的区别:copy会开辟一个新的空间,而‘=’不会. 浅copy只会copy第一层,再里边的就进行共享了. 需要记住的是copy之后记住的是内存寻址地址,而浅copy时如果 ...
- 本地已经存在的项目如何跟github发生关联
切换到本地项目地址 git init 初始化项目.该步骤会创建一个 .git文件夹是附属于该仓库的工作树. git add . git commit -am 'initial commit' git ...
- jQuery的select2下拉框的搜索功能(使用select2插件，方便简单)
第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...
- Java总结 - List实现类ArrayList&LinkedList
本文是根据源码进行学习的,如果我有什么理解不对的地方请多指正,谢谢您 上面基本就是List集合类的类图关系了,图中省略掉了比如Cloneable等标记接口,那么List分别具体的主要实现类有:Arra ...
- Terrorist’s destroy HDU - 4679
Terrorist’s destroy HDU - 4679 There is a city which is built like a tree.A terrorist wants to destr ...
- BFS：Open and Lock(一个数的逐位变化问题的搜索)
解体心得: 1.关于定义四维数组的问题,在起初使用时,总是在运行时出错,找了很多方法,最后全部将BFS()部分函数写在主函数中,将四维数组定义在主函数中才解决了问题.运行成功后再次将四维数组定义为全局 ...
- 并查集：HDU4496-D-City（倒用并查集）
D-City Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Total Submis ...
- HDU1272小希的迷宫
小希的迷宫 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一 ...
- P2920 [USACO08NOV]时间管理Time Management
P2920 [USACO08NOV]时间管理Time Management 题目描述 Ever the maturing businessman, Farmer John realizes that ...