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 ...
随机推荐
- C语言指针及占据内存空间
第一.了解内存空间 本文章文字有点多,会有点枯燥,配合图文一起看可以缓解枯燥,耐心阅读哦!!! 先了解内存地址,才更好的理解指针! 我们可以把内存想象为成一列很长很长的货运火车,有很多大小相同的车厢, ...
- C++ 自动类型推断
C++语言提供了自动类型推断的机制,用于简化代码书写,这是一种很不错的特性,使用auto和decltype都可以完成自动类型推断的工作,而且都工作在编译期,这表示在运行时不会有任何的性能损耗. 一.a ...
- JDBC——CreateStatement和PrepareStatement作用区别
本文主要讲了PrepareStatement和CreateStatement的作用区别,大家可以一起学习!走后端的小伙伴都会必修JDBC,在前段时间作者实训期间,看到老师举例的时候用了CreateSt ...
- 如何在OpenStack中对云主机类型进行重新配置
目标:很多用户在OpenStack启动一个虚拟机,选择了一个云主机配置类型,例如2CPU 4GB内存,使用了一段时间,感觉这个配置并不能满足需求,所以希望能够提高配置,那么OpeNStack的管理界面 ...
- Solaris磁盘镜像恢复
注:此文章笔者实验记录,欢迎大家指正 Solaris磁盘镜像恢复方法一: 系统启动,开机提示子镜像需要维护: 查看磁盘镜像信息 进入系统后,metastat -pc 和metadb #查看镜像状态与m ...
- LeetCode 681. Next Closest Time 最近时刻 / LintCode 862. 下一个最近的时间 (C++/Java)
题目: 给定一个"HH:MM"格式的时间,重复使用这些数字,返回下一个最近的时间.每个数字可以被重复使用任意次. 保证输入的时间都是有效的.例如,"01:34" ...
- Go语言实现：【剑指offer】对称的二叉树
该题目来源于牛客网<剑指offer>专题. 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. Go语言实现: 方法一:递归 / ...
- FastDFS 配置文件 tracker.conf
FastDFS 版本5.05 配置文件分为三部分 控制器:tracker.conf存储器:storage.conf 客户端:client.conf 文件位置:/etc/fdfs 基本配置(基础配置 ...
- windows运行shell脚本
1. 环境变量的理解:快速找到程序并执行,配置在path的目录下有系统环境和用户环境,配置在此的只要目录路径就好,在cmd输入名字就会去此路径找匹配程序执行 2. 将git安装目录下的....\Git ...
- linux入门系列13--磁盘管理之RAID、LVM技术
前一篇文章学习了磁盘分区.格式化.挂载等相关知识,本文将讲解RAID和LVM技术. 磁盘管理操作主要是运维人员用的较多,如果只是单纯的开发人员,可以先略过本文.但是在很多小公司里往往都是一人多用,运维 ...