float浮动以及案例演示
浮动元素会影响后边的元素，但不会影响前边的元素
清除浮动：
方法一：在浮动元素后面添加一个空元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background:#abcdef;
float:left;
border:1px solid;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="clear"></div>
<div class="last">
last~
</div>
</body>
</html>
方法二：
给浮动元素的父元素添加overflow:hidden;
再添加zoom:1; 兼容IE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background:#abcdef;
float:left;
border:1px solid;
}
.wrap{
overflow: hidden;
zoom:1;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="last">
last~
</div>
</body>
</html>
方法三：
使用css3的:after伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix{
zoom:1;/*兼容IE*/
}
.clearfix:after{
content:'';
display: block;
height:0;
visibility: hidden;
clear:both;
}
.box{
width:100px;
height:100px;
background:#abcdef;
float:left;
border:1px solid;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="last">
last~
</div>
</body>
</html>
float完成导航案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*重置样式*/
*{margin:0;padding:0;}
a{text-decoration: none;}
ul{list-style:none;}
/*基本样式*/
.header{
width:1120px;
background:#ccc;
margin:0 auto;
overflow: hidden;
zoom:1;
padding:0 40px;
}
.logo{
float:left;
width:100px;
height:68px;
}
.nav{
float:right;
overflow: hidden;
zoom:1;
}
.nav li{
float: left;
margin-right:20px; }
.nav li a{
color:#333;
display: block;
height:68px;
line-height:68px;
}
.nav li a:hover{
color:#fff;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="#"><img src="cat-little.jpg" alt="logo"></a>
</div>
<ul class="nav">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul> </div>
</body>
</html>
float浮动以及案例演示的更多相关文章
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
- <转载>如何解决子级用float浮动父级div高度不能自适应的问题
转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...
- CSS清除float浮动
一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- 给li设置float浮动属性之后，无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- float浮动问题：会造成父级元素高度坍塌；
float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...
随机推荐
- BP的matlab实现
%2015.04.26 Kang Yongxin ----v 2.0 %完成作业中BP算法,采用批量方式更新权重 %% %输入数据格式 %x 矩阵 : 样本个数*特征维度 %y 矩阵 :样本个数*类别 ...
- Windows玩转Kubernetes系列3-Centos安装K8S
以往文章参考: Windows玩转Kubernetes系列1-VirtualBox安装Centos Windows玩转Kubernetes系列2-Centos安装Docker 安装K8S yum in ...
- kvm 中 Guest Is already in use 处理办法
在安装kvm时,如果安装相同名字的虚拟机,是会有错误提示的,就算是删除了虚拟机的xml文件,也会弹出错误提示.如下: ERROR Guest name 'test' is already in use ...
- Windows 7中的“帮助和支持”无法打开怎么办？
win7 X64 将下面的代码导入注册表 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xml] @="xmlfile&q ...
- win10 + cuda10 +cudnn + GLUON 环境搭建
1. <动手学深度学习> 由于新型非典型肺炎扩散,上班日期挪到2.10 日了,在家比较无聊决定了解一下深度学习. 在github 上找到一个资源,可以动手学深度学习,便打算按照这本书的内容 ...
- Codeforces_729_E
http://codeforces.com/problemset/problem/729/E 存在的数必须连续,若不连续,从最后选人来补,注意根不是0和其他点是0的情况. #include<io ...
- python批量删除子文件夹中的空子文件夹
例如A文件夹下有许多子文件夹,我需要获得的是子文件夹中的图片,但是现在子文件夹中不光有图片,还混入了空的文件夹(在使用OpenImages工具箱的时候,按照检索的方式下载的图片文件中是带有label的 ...
- kendo-ui 几个有用的数据操作
在工作中发现几个有用的api: 一,grid1.获得grid var grid = $("#proList").data("kendoGrid");2.获得da ...
- MapReduce清洗数据进行可视化
继上篇第一阶段清洗数据并导入hive 本篇是剩下的两阶段 2.数据处理: ·统计最受欢迎的视频/文章的Top10访问次数 (video/article) ·按照地市统计最受欢迎的Top10课程 (ip ...
- spark sql 执行计划生成案例
前言 一个SQL从词法解析.语法解析.逻辑执行计划.物理执行计划最终转换为可以执行的RDD,中间经历了很多的步骤和流程.其中词法分析和语法分析均有ANTLR4完成,可以进一步学习ANTLR4的相关知识 ...