盼盼Degenerate——清除浮动的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
header{
width: 100%;
background: orange;
text-align: center;
font-size: 24px;
padding: 10px 0;
}
.box{
width: 100%;
border: 2px solid #000000;
}
.box li{
width: 25%;
height: 100px;
background: pink;
float: left;
margin: 10px ;
}
div.carousel{
width: 100%;
height: 300px;
background: aquamarine;
}
footer{
width: 100%;
position: fixed;
bottom: 0;
background: orange;
text-align: center;
font-size: 24px;
padding: 10px 0;
}
</style>
<body>
<header>头部</header>
<ul class="box">
<li></li>
<li></li>
<li></li>
</ul>
<div class="carousel">
</div>
<footer>底部</footer>
</body>
</html>
此时在浏览器中的样式
第一种方法
使用overflow: hidden;
给父元素添加overflow: hidden;
第二种方法
在子元素后边添加一个空div
<ul class="box">
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
css样式
.clearfix{
clear: both;
}
第三种使用伪元素
css代码
.box:after{
content: '';
display: block;
clear: both;
}
第四种浮动父元素
.box{
width: 100%;
border: 2px solid #000000;
float: left;
}
但是此时在浏览器我们可以看到并不是我们想要的效果
为了解决这个问题 我们在父元素下面添加一个空div
<body>
<header>头部</header>
<ul class="box">
<li></li>
<li></li>
<li></li>
</ul>
<div class="clearfix"></div>
<div class="carousel">
</div>
<footer>底部</footer>
</body>
css样式
.clearfix{
clear: both;
}
这样就解决了这个问题
盼盼Degenerate——清除浮动的方法的更多相关文章
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- CSS清除浮动的方法及优缺点
浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...
- 【Web】网页清除浮动的方法
网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
随机推荐
- Spring HandlerInterceptor
1.Spring HandlerInterceptor 可以组成一个chain. 这个接口有三个方法: public interface HandlerInterceptor { /** * Inte ...
- JS笔记一：动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- Linux基础（七）
一.nfs服务 nfs(Network File System)即网络文件系统,它允许网络中的计算机之间通过TCP/IP网络共享资源.常用于Linux系统之间的文件共享. nfs在文件传送过程中依赖r ...
- FillConsoleOutputAttribute 函数--指定区域填充控制台输出属性
FillConsoleOutputAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms682663(v= ...
- CSS随笔2
1. css中: a:link { /*表示普通的,未被访问的链接状态*/ color: black;} a:visited { /*表示链接被访问过后的状态*/ color: bluev ...
- Eclipse详细设置护眼背景色和字体颜色并导出
Eclipse详细设置护眼背景色和字体颜色并导出 Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的背景色实在是太刺激眼球了.下面,将给大家详细介绍如何设置成护眼主题的方法,也 ...
- 贡献你的代码，将jar包发布到Maven中央仓库以及常见错误的解决办法
前几天将自己的日志工具发布到了Maven中央仓库中.这个工具本省没有多少技术含量,因为是修改别人的源代码实现的,但是将jar发布到Maven仓库却收获颇丰,因为网上有些教程过时了,在此分享下自己发布j ...
- Shell排序
public void shellSort(int[] array) { int increment = array.length; do { increment = increment / 2; / ...
- UITabbarController左右滑动切换标签页
UITabbarController左右滑动切换标签页 每个Tabbar ViewController都要添加如下代码,建议在基类中添加:ViewDidLoadUISwipeGestureRecogn ...
- 找不到包含 OwinStartupAttribute 的程序集。 - 找不到包含 Startup 或 [AssemblyName].Startup 类的程序集。
打开web.config添加 <add key="owin:appStartup" value="false" /> <add key=&qu ...