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 ...
随机推荐
- 牛客小白月赛5 I 区间 (interval) 【前缀和】
链接:https://www.nowcoder.com/acm/contest/135/I 题目描述 Apojacsleam喜欢数组. 他现在有一个n个元素的数组a,而他要对a[L]-a[R]进行M次 ...
- 转：CentOS7 下 Redis4 安装与配置教程（Redis开机启动）
转 https://ken.io/note/centos7-redis4-setup 一.前言 1.本教程主要内容 Redis安装与测试 Redis远程访问配置 Redis开机启动配置 2.本教程环境 ...
- CI框架 重定向redirect()
CI框架不能使用$this->redirect(),只能使用redirect():并且默认重定向地址带有index.php,如果需要去掉,请使用绝对地址. 使用示例: 通过发送HTTP头,命令客 ...
- python面试题Python2.x和Python3.x的区别
所属网站分类: 面试经典 > python 作者:外星人入侵 原文链接: http://www.pythonheidong.com/blog/article/22/ 来源:python黑洞网 w ...
- day23-python之日志 re模块
1.logging import logging #-----------------------------------logging.basicConfig logging.basicConfig ...
- Python9-From-CSS-day48
1.form表单相关内容前后端有数据交互的时候用form表单form表单提交数据的几个注意事项: 1.所有获取用户输入的标签都必须放在form表单里面 2.action 控制着往哪里提交 3.inpu ...
- tomcat8+idea远程调试
window下 setenv.bat增加 set JPDA_OPTS=-Xrunjdwp:transport=dt_socket,address=8787,server=y,suspend=n lin ...
- wget常用下载命令
wget wget是一个从网络上自动下载文件的自由工具,支持通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理.wget名称的由来是“World Wide Web ...
- git使用问题整理
git访问远端仓库报"fatal: Authentication failed for"错误的,可能原因是账户密码变更,git配置了使用creditial helper,所以需要取 ...
- POI-java下载excel-HSSFWorkbook
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOExceptio ...