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基础-清除浮动的更多相关文章

  1. CSS基础 清除浮动

    1.单伪元素清除法:清除浮动 .clearfix::after{             content: '.';             display: block;             c ...

  2. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  3. css基础(浮动 清除f浮动)

    文档流(标准流) 1.元素自上而下,自左而右  2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行   浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...

  4. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  5. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  6. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  7. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  8. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  9. CSS之清除浮动

    一.清除浮动的目的. 1.当一个父元素的高度不写或为auto时,而且这个父元素内又有浮动的子元素,那么这时候该父元素的高度将不会自动适应子元素的高度,也可以说高度是0px; 有如下代码: <di ...

随机推荐

  1. 【JS新手教程】LODOP打印复选框选中的内容

    在html中,复选框是常见的使用之一,本文介绍如何获取选中的复选框的值,并用LODOP打印.给需要为一组的复选框,复选框的checkbox设置相同的name属性,设置不同的id,然后设置需要的valu ...

  2. ASP.NET MVC路由配置详解

    命名参数规范+匿名对象 routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", ...

  3. windows2008R2下iis7.5中的url重写(urlrewrite)

    以前在windows2003里,使用的是iis6.0,那时常使用的URL重写组件是iisrewrite,当服务器升级到windows2008R2时,IIS成了64位的7.5,结果iisreite组件是 ...

  4. SQL Server判断对象是否存在

    1 判断数据库是否存在 if exists (select * from sys.databases where name = ’数据库名’) drop database [数据库名] if exis ...

  5. TS - 问题解决力 - 上篇

    本文是已读书籍的内容摘要,少部分有轻微改动,但不影响原文表达. <麦肯锡工作法 - 个人竞争力提升50%的7堂课> ISBN: 9787508644691 https://book.dou ...

  6. skywalking 链路式跟踪

    wget http://mirror.bit.edu.cn/apache/skywalking/6.4.0/apache-skywalking-apm-6.4.0.tar.gzwget https:/ ...

  7. Swoole练习 UDP

    UDP 服务代码 <?php //创建Server对象,监听 127.0.0.1:9502端口,类型为SWOOLE_SOCK_UDP $serv = new swoole_server(&quo ...

  8. Linux中执行 .sh 的方法

    linux下执行.sh文件的方法 .sh文件就是文本文件,如果要执行,需要使用chmod a+x xxx.sh来给可执行权限. 是bash脚本么 可以用touch test.sh #创建test.sh ...

  9. 批处理快速合并多分Excel文件并将指定列的数据去重复

    1.批处理快速合并多个excel文件方法: 新建一个.txt文本文件,就命名为合并.txt吧. 而后开启文件,复制以下代码到文件中: @echo off E: cd xls dir copy *.cs ...

  10. Android StickyListHeadersListView头部悬停 分组列表实现

    最近在做分组列表,头部悬停的效果,在github上就搜到了StickyListHeaders(https://github.com/emilsjolander/StickyListHeaders)这个 ...