H5 70-清除浮动方式五
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>70-清除浮动方式五</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
div{
width: 100px;
height: 100px;
background-color: red;
overflow: hidden;
}
*/
/*
.box1{
background-color: red;
overflow: hidden;
*zoom:1;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
*/
.box1{
width: 200px;
height: 200px;
background-color: red;
/*border: 1px solid #000;*/
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<!--
1.overflow: hidden;作用
1.1可以将超出标签范围的内容裁剪掉
1.2清除浮动
1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
--> <!--
<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
--> <!--
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p> </div> <div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
H5 70-清除浮动方式五的更多相关文章
- HTML连载50-伪元素选择器、清除浮动方式五
一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...
- 第五篇：web之前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...
- 前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...
- 【CSS】清除浮动的五种方式
清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...
- css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- H5 69-清除浮动方式四
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5 67-清除浮动方式三
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5 66-清除浮动方式二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5 65-清除浮动方式一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- windows下VMware-workstation中安装CentOS
windows下VMware-workstation中安装CentOS,可以分两部分,安装虚拟机和安装CentOS虚拟机.具体步骤如下: 一.安装虚拟机 1.安装VMware-workstation, ...
- 洗礼灵魂，修炼python（80）--全栈项目实战篇（8）—— 计算器
用正则表达式开发一个计算器,计算用户给定的一串带有加减乘除的公式. 要求:不能使用eval转换字符串 分析: 要求简单,就是计算混合运算,但是不能使用eval直接转换,主要就是把整个式子中的小括号优先 ...
- C#中的委托和事件 - Part.1
注意:文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,在VS2003下会报错,解决办法是显式 ...
- distribution 分发数据库 灾难恢复 备份恢复
参考: http://www.sqlservercentral.com/articles/Replication/117265/ 前提: 准备一台电脑,主机名和以前的分发数据库一致.并且安装s ...
- 本博客停止更新改用wordperss
http://www.azurew.com/ 还是能有自己的博客比较爽 哈哈哈
- 4.4Python数据处理篇之Matplotlib系列(四)---plt.bar()与plt.barh条形图
目录 目录 前言 (一)竖值条形图 (二)水平条形图 1.使用bar()绘制: 2.使用barh()绘制: (三)复杂的条形图 1.并列条形图: 2.叠加条形图: 3.添加图例于数据标签的条形图: 目 ...
- beta版本合集
beta版本合集 [<p><span style="text-align: center; padding-bottom: 6px; background-color: # ...
- Python中可变和不可变类型
可变类型 列表,字典,集合 不可变类型 数字,字符串,元组 这里的可变不可变,是指内存中的那块内容(value)是否可以被改变 不可变类型 数字 a = 1 b = 1 print(id(a), id ...
- P1824 进击的奶牛（二分）
思路:把检验的函数说一下,就是检测的距离x时,是否存在c个隔断相离大于等于x,如果是则返回1,不是则返回0 #include<iostream> #include<cstdio> ...
- https基础
面试题 https://blog.csdn.net/xihuangwutong/article/list/5? TLS 有三大功能:内容加密,身份认证,数据完整性认证 内容加密是依赖于秘钥协商协议数据 ...