我们可以看到这样一个布局:

<style>
.left{
width: 200px;
height: 200px;
background-color: #00ee00;
float: left;
}
.right{
width: 100px;
height: 200px;
background-color: #0000FF;
float: left;
}
.footer{
width: 300px;
height: 50px;
background-color: #0f0f0f;
}
</style>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>

我们预期效果:                            结果:

                                            

原因:因为父盒子没有给高,然后content内的子元素又是左浮动,脱离标准流,然后下面的footer就会跑上去,这是因为浮动问题产生的,如何解决:

方法1:使用clear:both

  

<style>
.left{
width: 200px;
height: 200px;
background-color: #00ee00;
float: left;
}
.right{
width: 100px;
height: 200px;
background-color: #0000FF;
float: left;
}
.footer{
width: 300px;
height: 50px;
background-color: #0f0f0f;
}
.clearfix{
clear: both;
}
</style>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="footer"></div>

方法二:使用overflow:hidden;

<style>
.content{
overflow: hidden;
}
.left{
width: 200px;
height: 200px;
background-color: #00ee00;
float: left;
}
.right{
width: 100px;
height: 200px;
background-color: #0000FF;
float: left;
}
.footer{
width: 300px;
height: 50px;
background-color: #0f0f0f;
}
</style>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>

第三种(推荐):clearfix伪类

<style>
.left{
width: 200px;
height: 200px;
background-color: #00ee00;
float: left;
}
.right{
width: 100px;
height: 200px;
background-color: #0000FF;
float: left;
}
.footer{
width: 300px;
height: 50px;
background-color: #0f0f0f;
}
.clearfix:after{
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix{
zoom: 1;//兼容ie浏览器
}
</style>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>

  

css 清楚浮动三种方法的更多相关文章

  1. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  2. 你不知道的css高级应用三种方法——实现多行省略

    前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...

  3. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  4. CSS水平居中的三种方法

    CSS中经常会用到元素居中,那么今天我为大家分享几种水平居中的方法,下面代码都可以达到同样的居中效果,来不及解释了,快上马(码): 一.margin : 0 auto; <head> &l ...

  5. HTML页面中插入CSS样式的三种方法

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...

  6. 使用CSS样式的三种方法

    一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...

  7. 基础总结(01)--css清除浮动几种方法

    1.父元素添加overflow:auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; displ ...

  8. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  9. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

随机推荐

  1. Python Windows下打包成exe文件

    Python Windows 下打包成exe文件,使用PyInstaller 软件环境: 1.OS:Win10 64 位 2.Python 3.7 3.安装PyInstaller 先检查是否已安装Py ...

  2. dpdk中log的使用方法

    1 log简介    dpdk中通过log系统记录相关的日志信息,每一条日志除日志内容外,还有两个附加信息,log级别和log类型.开发人员可根据级别和类型对日志信息进行过滤,只记录必要的日志.1.1 ...

  3. C语言cJSON库的使用,解析json数据格式

    C语言cJSON库的使用,解析json数据格式 摘自:https://www.cnblogs.com/piaoyang/p/9274925.html 对于c语言来说是没有字典这样的结构的,所以对于解析 ...

  4. Oracle VirtualBox 问题汇总

    1.打开虚拟机时报硬盘UUID 已经存在:错误信息: Cannot register the hard disk 'F:\VirtualBox VMs\cl-11r2-rac2\cl-11r2-rac ...

  5. 开源项目spring-shiro-training思维导图

    写在前面 终于完成了一个开源项目的思维导图解读.选spring-shiro-training这个项目解读是因为它开源,然后涉及到了很多我们常用的技术,如缓存,权限,任务调度,ssm框架,Druid监控 ...

  6. Swig在Mac OS X上的安装

    网上有很多类似文章介绍Swig怎么在Mac OS X上安装和配置,一般来说就是: 下载pcre,configure & make & make install 下载swig,confi ...

  7. 安装DotNetCore.1.0.0-VS2015Tools.Preview2一直失败

    266C:22B0][2016-08-01T23:02:29]i052: Condition 'WixBundleInstalled OR NOT(NetFx45Release < 378675 ...

  8. HDU 2602 Bone Collector (01背包DP)

    题意:给定一个体积,和一些物品的价值和体积,问你最大的价值. 析:最基础的01背包,dp[i] 表示体积 i 时最大价值. 代码如下: #pragma comment(linker, "/S ...

  9. 20169202 2016-2017-2《TCP/IP协议攻击》实验总结--十一周

    APR缓存中毒(ARP cache poisoning) 实验原理 ARP缓存是ARP协议的重要组成部分.ARP协议运行的目标就是建立MAC地址和IP地址的映射,然后把这一映射关系保存在ARP缓存中, ...

  10. Git代码行统计命令集

    统计某人的代码提交量,包括增加,删除: git log --author="$(git config --get user.name)" --pretty=tformat: --n ...