HTML基础知识（3）浮动、塌陷问题
1、浮动
1.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
/*
当一个元素设置为浮动后，元素会立即脱离文档流，下边的元素会立即向上移动，元素浮动以后会尽量向左上或者右上浮动
如果浮动元素上方是一个没有浮动的块元素，则浮动元素不会超过块元素
*/
.box1{
width: 200px;
height: 200px;
background-color: yellow;
float: right;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1.2、测试结果
2、简单布局
2.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style type="text/css">
/* 清楚默认样式 */
*{
margin: 0;
padding: 0;
}
/*设置头部div*/
.header{
/* 设置高度 */
height: 120px;
/* 设置宽度 */
width: 1000px;
/* 设置背景 */
background-color: grey;
/* 居中 */
margin: 0 auto ;
}
/*设置content div*/
.content{
/* 设置高度 */
height: 400px;
/* 设置宽度 */
width: 1000px;
/* 设置背景 */
background-color: green;
/* 居中 */
margin: 10px auto ;
}
/* 设置content中的内容 */
.left{
height: 100%;
width: 200px;
background-color: red;
float: left;
}
.center{
height: 100%;
width: 580px;
background-color: blueviolet;
float: left;
margin: 0 10px;
}
.right{
height: 100%;
width: 200px;
background-color: pink;
float: left;
}
/*设置footer div*/
.footer{
/* 设置高度 */
height: 150px;
/* 设置宽度 */
width: 1000px;
/* 设置背景 */
background-color: yellow;
/* 居中 */
margin: 0 auto ;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header"></div>
<!-- 内容 -->
<div class="content">
<!-- 左侧 -->
<div class="left"></div>
<!-- 中间 -->
<div class="center"></div>
<!-- 右侧 -->
<div class="right"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
</body>
</html>
2.2 测试结果
3、导航条
3.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<style type="text/css">
/* 清楚默认样式 */
*{
margin: 0;
padding: 0;
}
.nav{
/* 清楚列表项前字符 */
list-style: none;
width: 1000px;
background-color: blue;
margin: 10px auto;
/* 解决高度塌陷 */
overflow: hidden;
}
/* 设置li */
.nav li{
/* 设置li向左浮动 */
float: left;
/* 设置li宽度 */
width: 12.5%;
}
.nav a{
/* 将a转换为块元素 */
display: block;
/* 设置a的宽度 */
width: 100%;
/* 设置文字居中 */
text-align: center;
/* 设置高度 */
padding: 5px 0;
/* 去除超链接下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: white;
font-weight: bold;
}
/* 设置鼠标移动到这里的效果 */
.nav a:hover{
background-color: red;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</body>
</html>
3.2 测试效果
4、塌陷问题clear
4.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动带来的影响</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
/*
由于收到box浮动的影响,.box1整体向上移动100px
有时我们需要清除浮动带来的影响,可以使用clear
可取值:
none:默认值,不清除浮动
left:清除左侧浮动元素带来的影响
right:清除左侧浮动元素带来的影响
both:清除两侧
清除其它元素浮动对当前元素造成的影响
*/
.box2{
border: 1px red solid;
}
.box3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
/* 解决高度塌陷方案：
可以直接在高度塌陷的父元素的最后，在添加一个空白的div
这个div没有浮动，可以撑开父元素的高度，
然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
基本没有副作用 */
.box4{
clear: both;
}
/* 通过after伪类，选中box2的后边 */
/* .clearfix:after{
/* 添加一个内容 */
/* content:""; */
/* 转化为要给块元素 */
/* display: block; */
/*清除两侧的浮动*/
/* clear:both; */
/* } */
</style>
</head>
<body>
<div class="box"></div>
<hr>
<div class="box1"></div>
<hr>
<br><br>
<div class="box2 clearfix">
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
4.2 测试结果
HTML基础知识（3）浮动、塌陷问题的更多相关文章
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 前端基础知识之html和css全解
前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...
- JVM 基础知识
JVM 基础知识(GC) 2013-12-10 00:16 3190人阅读 评论(1) 收藏 举报 分类: Java(49) 目录(?)[+] 几年前写过一篇关于JVM调优的文章,前段时间拿出来看了看 ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 【RAC】RAC相关基础知识
[RAC]RAC相关基础知识 1.CRS简介 从Oracle 10G开始,oracle引进一套完整的集群管理解决方案—-Cluster-Ready Services,它包括集群连通性.消息和锁. ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
随机推荐
- spring实体类（POJO）参数的赋值（form表单）原理
10.实体类(POJO)参数的赋值(form表单)原理 10.1.原理解析 测试用例 准备好两个实体类 public class Person { private String name; priva ...
- SP6779 GSS7 - Can you answer these queries VII(线段树，树链剖分)
水题,只是坑点多,\(tag\)为\(0\)时可能也要\(pushdown\),所以要\(bool\)标记是否需要.最后树链剖分询问时注意线段有向!!! #include <cstring> ...
- Luogu3850 [TJOI2007]书架 （平衡树）
将要插入位置前和前前splay,再连在右子树上. #include <iostream> #include <cstdio> #include <cstring> ...
- 如何定义 Java 的回调函数，与 JavaScript 回调函数的区别
JavaScript 中的回调函数 在 JavaScript 中经常使用回调函数,比如:get 请求.post 请求等异步任务.在我们请求之前以及请求之后,都需要完成一些固定的操作,比如:请求之前先从 ...
- 「题解报告」P4577 [FJOI2018]领导集团问题
题解 P4577 [FJOI2018]领导集团问题 题解区好像没有线段树上又套了二分的做法,于是就有了这片题解. 题目传送门 怀着必 WA 的决心交了两发,一不小心就过了. 题意 求一个树上最长不下降 ...
- QT学习（四）----360界面制作（1）
参照网上的资料,模仿了一份360新特效的界面. 源代码在:http://download.csdn.net/detail/zhangyang1990828/5238013 360真实效果:(最好自己打 ...
- Java Socket底层实现浅析
最近在学Java的socket编程,发现Java可以很简单的通过socketAPI实现网络通信,但是我一直有个疑问,Java的socket的底层是怎么实现的? 如果没记错的话Java的底层是C和C++ ...
- python自动更新pom文件
前言 项目越来越多,版本管理越来越麻烦,在项目上我使用 maven version 来进行版本管理.主要还是在分布式项目中模块众多的场景中使用,毕竟各个模块对外的版本需要保持统一. 关于这个插件如何使 ...
- 2、String类
String类 String 对象用于保存字符串,也就是一组字符序列 字符串常量对象是用双引号括起来的字符序列,例如:"你好"."12.07"."bo ...
- 前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ...