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 的出现其实也是应了广大人民群众的需求,虽然 ...
随机推荐
- Apache DolphinScheduler 3.0.0 正式版发布！
点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler 版本发布 2022/8/10 2022 年 8 ...
- 从 Airflow 到 Apache DolphinScheduler，有赞大数据开发平台的调度系统演进
点击上方 蓝字关注我们 作者 | 宋哲琦 ✎ 编 者 按 在不久前的 Apache DolphinScheduler Meetup 2021 上,有赞大数据开发平台负责人 宋哲琦 带来了平台调度系统 ...
- selenium结合jmeter进行测试
背景 现在市面上有众多成熟的性能测试工具,JMeter就是其中之一.可以通过JMeter快速将已有的Selenium代码以性能测试的方式组织起来,并使用JMeter丰富的报表功能展示测试结果. 相关链 ...
- Flutter 开启 Windows、macOS 平台支持的命令
Flutter 的多平台支持除了 Android 和 iOS 是默认开启的以外,比如 Windows.Linux 平台的支持需要手动开启. Flutter config 命令集中,有以下参数是对于平台 ...
- 2022年NISP考试时间|NISP一级考试时间|NISP|网安伴|NISP管理中心
NISP一级~~国家信息安全水平考试一级证书 NISP一级证书是由中国信息安全测评中心颁发的国家级认证证书.面向全社会各行各业通用的信息安全意识普及和信息安全保护知识培训,是在任何单位和工作中都应具备 ...
- C#基础_XML文件介绍
XML简介 XML 被设计用来传输和存储数据. HTML 被设计用来显示数据. 什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语 ...
- 第六十篇：Vue的基本使用
好家伙,要来了,经典"hello world" 试用一下vue ① 导入 vue.js的 script 脚本文件 ② 在页面中声明一个将要被vue所控制的DOM区域 ③ 创建vm实 ...
- 第四篇:理解vue代码
解释以下代码: 实现输入框中能够打字的功能 <el-input v-model="input" placeholder="在这打字"></el ...
- MYSQL 安装及语法
Ubuntu 16.04 安装MySql 目录 一.安装MySql服务器和客户端 1.登录 2.创建数据库 3.选择数据库 4.查看数据库 5.创建数据表 6.查看数据表 7.更改数据表名字 8.更改 ...
- KingbbaseES V8R6集群维护案例之---集群之间数据迁移
案例说明: 生产环境是集群环境,测试环境是集群,现需要将生产环境的数据迁移到测试集群中运行,本文档详细介绍了从集群环境迁移数据的操作步骤,可以作为生产环境迁移数据的参考. 适用版本: Kingbase ...