HTML&CSS基础-清除浮动
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.查看浮动效果
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title> <style>
.box1{
width: 100px;
height: 100px;
background-color: red;
/**
* 设置box1相左浮动
*/
float: left;
} .box2{
width: 200px;
height: 200px;
background-color: yellow;
/**
* 设置box2相右浮动
*/
float: right;
} .box3{
width: 300px;
height: 300px;
background-color: deeppink;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
二.查看清除浮动效果
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title> <style>
.box1{
width: 100px;
height: 100px;
background-color: red;
/**
* 设置box1相左浮动
*/
float: left;
} .box2{
width: 200px;
height: 200px;
background-color: yellow;
/**
* 设置box2相右浮动
*/
float: right;
} .box3{
width: 300px;
height: 300px;
background-color: deeppink;
/**
* 由于受到box1和box2浮动的影响，整体向上移动300px
* 我们有时希望清除掉其它元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。
*
* clear可以用来清除其它浮动元素对当前元素的影响,它有以下可选值:
* none:
* 默认值，不清楚浮动
* left:
* 清除左侧浮动元素对当前元素的影响
* right:
* 清除右侧浮动元素对当前元素的影响
* both:
* 清除两侧浮动元素对当前元素的影响，明确的说是清除对它影响最大的那个元素的浮动
*
* 案例如下:
* 清除box1的浮动对box3的影响，但是并没有清除box2浮动对box3的影响
* 清除浮动以后，元素会回到其他人元素浮动之前的位置。
*/
clear: left;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
HTML&CSS基础-清除浮动的更多相关文章
-
【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
-
css基础（浮动 清除f浮动）
文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...
-
CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
-
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
-
CSS clear清除浮动
1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...
-
关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
-
div+css之清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...
-
CSS之清除浮动
一.清除浮动的目的. 1.当一个父元素的高度不写或为auto时,而且这个父元素内又有浮动的子元素,那么这时候该父元素的高度将不会自动适应子元素的高度,也可以说高度是0px; 有如下代码: <di ...
-
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
随机推荐
-
词法分析程序（C）
#include <stdio.h> #include <string.h> ],word[],ch; int type,p,i,n,sum; ]={"begin&q ...
-
Win7---------专区
待完善中-------------------------------------- 1.0Win7来历: 不算上最早的Windows版本从 95 98 2000 ME XP 2003 Vis ...
-
百钱买百鸡问题 php版本
/* * 百钱买百鸡问题 * * 我国古代数学家张丘建在<算经>一书中曾提出过著名的“百钱买百鸡”问题,该问题叙述如下:鸡翁一,值钱五:鸡母一,值钱三:鸡雏三,值钱一:百钱买百鸡,则翁.母 ...
-
Visual Studio 2008破解激活升级方法
声明:本文中涉及到的序列号及更新方法均来自互联网,请支持正版. 微软为业余爱好者.热衷者和学生提供了免费版——Express Edition (轻型.易学.易用的开发工具). 如不想支付任何费用,建议 ...
-
哪里有比较全的hadoop视频教程
robby老师讲了套hadoop视频,讲的比的深入浅出,内容很丰富,把网盘下载地址提供给大家一下: 视频下载啦很大,有图有真相: 1,Hadoop介绍,HDFS和MapReduce工作原理:http: ...
-
HP quality center 9.0 邮件设置
[转载]HP quality center 9.0 邮件设置 (2010-09-20 10:28:03) 转载▼ 标签: 转载 原文地址:HP quality center 9.0 邮件设置作者: ...
-
微软 深度学习 cntk ，我目前见过 安装方式最简单的一个框架，2.0之后开始支持C# 咯
嗨,你也是我这种手残党么?之前试着安装着mxnet和tensorflow,但是因为时间比较短所以往往来不及安装完就失去兴趣,今天看到微软的cntk可以用了,一次性安装好了,并且测试通过 本人环境: W ...
-
Microsoft Offce 使用纪事：oneNote笔记本分区删除
OneNote 笔记本和分区删除 OneNote 目前无法在客户端和本地删除已有的笔记本和分区,只能通过OneDrive才能够从云端删除: step1 step2 step3 后记 由于需要登录One ...
-
[最短路]P1078 文化之旅
题目描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一 种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不 同的国家可能有相同的文化.不同 ...
-
VK-Cup 2017 qualification 1
VK-Cup,cf里面只有切成俄文才能看到,题目也都是俄文的(百度翻译成英文和中文). 两人组队参赛的,赛期1天,乐多赛赛制(和时间基本无关,交上去挂了扣分).这次是第一场资格赛. 这次又和ditol ...