html中如何清除浮动

 

在html中,浮动可以说是比较常用的。在页面的布局中他有着很大的作用,但是浮动中存在的问题也是比较多的。现在我们简单说一下怎么去除浮动

首先我们先简单的看一下浮动:

首先我们先创建一个简单的div,并在其中再放两个div,并且给他们不同的样式。

css样式代码:

1
2
3
4
5
#div1{background: medium purple;}
 
#left{width: 200px;height: 100px;background: sky-blue;}
 
#right{width: 250px;height: 150px;background: pink;}

html代码:

1
2
3
4
<div id="div1">
    <div id="left"></div>
    <div id= "right"></div>
</div>

效果图:

这就是最开始我们我们最开始的结构和样式,现在我们给左上方蓝色的div一个向左浮动(float.left)看看有什么变化。

css代码:

1
#left{width: 200px;height: 100px;background: skyblue;float:left;}

效果图:

在这次的效果图上大家可以看到,粉色的div跑到了蓝色div的下面,而且紫色的div的宽度变成了和粉色div一样的宽度了,所以说在元素浮动后久不会再占据文档流了。它的宽度在没有定义的情况下,由自己的内容撑开。此时我们在给粉色的div一个左浮动看一下有什么变化。

css代码:

1
#right{width: 250px;height: 150px;background: pink;float:left;} 

效果图:

大家会发现紫色的div已经完全消失了。而蓝色的div和粉色的div出现在了同一行。所以说在元素进行了浮动后默认是出现在同一行,而且浮动元素的位置是到父级的边界或者是遇到另外一个浮动元素才会停止。很多然会问,我们并不想让紫色的div消失怎么办?这就是我们今天要说的去除浮动的方法。

方法一:(给父级元素宽度和高度)

  由于浮动元素不占据文档流,所以说紫色div是由于没有内容撑开高度才消失的,而不是不存在了。所以方法一就是我们给紫色div高度和宽度也就是给浮动元素的父级高度和宽度,从而让它自己撑开宽高,从而进行显示。

css代码:

1
2
3
4
5
#div1{width:600px;height:300px;background: medium purple;}
 
#left{width: 200px;height: 100px;background: sky-blue;}
 
#right{width: 250px;height: 150px;background: pink;}

效果图:

方法二:父级元素加上overflow:hidden

很多人会说我们不想给紫色div固定的宽高,想让它的内容将它撑开。那么我们就可以在父级元素上也就是紫色div的css中加上overflow:hidden。从而让紫色div显示出来了。

css代码:

1
#div1{background: medium purple;overflow:hidden}

效果图

方法三:给兄弟元素加一个clear:both

除了对父级进行改变,我们也可以对子元素的兄弟元素进行改动,从而达到去除浮动的效果。

html代码:

1
2
3
4
5
<div id="div1">
    <div id="left"></div>
    <div id= "right"></div>
    <div id="div2"></div>
</div

效果图:

方法四:利用伪类去除浮动

用伪类清除浮动时用after,并且加上content:""可以加内容也可以不加,但是一定要加上display:block;同时还要写clear:both;

css代码:

1
#div1:after{content:"";clear: both;display: block;}

效果图:

以上就是一些清除浮动的方法,希望可以帮助到大家。

HTML 中清除浮动的更多相关文章

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

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

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

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

  3. CSS中 清除浮动解决“包含问题”

    今天看到大神对浮动定位作了个详细的分析  刚好就分析了当时任务三遇到的问题 在一个div中定义了三个div,让横向排列,结果父元素div的背景色显示不出来了 ,这是个经典问题----包含浮动 < ...

  4. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  5. CSS中清除浮动的方法

    CSS浮动,最早是为了达到文字环绕的效果提出的,也可以用来做布局,但是布局会产生很多问题(高度塌陷,漂浮在普通流上),会使当前标签产生上浮的效果,会影响前后标签,同样的代码在不同的浏览器的兼容性也不一 ...

  6. 【Web】网页清除浮动的方法

    网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...

  7. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  8. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

  9. css 中的浮动

    css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...

随机推荐

  1. flask的url处理器(url_defaults和url_value_preprocessor)

    url处理器的作用:对于一部分资源, 你并不是很清楚该如何设定其 URL 相同的部分.例如可能有一些URL包含了几个字母来指定的多国语言语种,但是你不想在每个函数里都手动识别到底是哪个语言 rom f ...

  2. Spring Security详解

    Spring Security 一. 简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文 ...

  3. Git 连接github

    大概如下: 详细如下:如果使用本文命令,请仔细选择,因为添加一些相关命令以供参考. 1 本地仓库 1.1 创建git 仓库 git init # 初始化本地仓库 git --version # 查看G ...

  4. shell点名脚本不重复人名

    效果如图: 代码如下: #!/bin/bash #Author:GaoHongYu #QQ: #Time:-- :: #Name:dm.sh #Version:V1. stu=(刘一 陈二 张三 李四 ...

  5. Groovy重载操作符

    重载一时爽,一直重载一直爽. 最近在读<Groovy in action>一本书重新复习了Groovy的一些语法特性,迷恋上这个重载操作符的功能,坚持爽的不要要的.分享一个Demo. 由于 ...

  6. 当Parallel遇上了DI - Spring并行数据聚合最佳实践

    分析淘宝PDP 让我们先看个图, Taobao的PDP(Product Detail Page)页. 打开Chrome Network面板, 让我们来看taobao是怎么加载这个页面数据的. 根据经验 ...

  7. 在nginx服务器里面搭建好node.js本地服务器后,利用Node.js的FS模块,实现简单数据的写入和读取

    先在server.js里面引入: var fs = require('fs');   然后写入  // 往writeme.txt文件 写入一些内容     fs.writeFile('./writem ...

  8. schedule of 2016-10-09~2016-10-16(Sunday~Sunday)——1st semester of 2nd Grade

    most important things to do 1.prepare for toefl 2.joint phd preparations 3.ieee trans thesis to writ ...

  9. iOS-UITableView HeaderView随Cell一起移动

    我们在使用TableView的时候,有时会设置HeaderView,当我们滑动的时候,HeaderView不会随Cell滑出屏幕,而是会固定到导航栏下面.今天我们要实现HeaderView随滑动一起滑 ...

  10. 《C++Primer》第五版习题答案--第二章【学习笔记】

    C++Primer第五版习题解答---第二章 ps:答案是个人在学习过程中书写,可能存在错漏之处,仅作参考. 作者:cosefy Date: 2020/1/9 第二章:变量和基本类型 练习2.1: 类 ...