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 ...
随机推荐
- solaris系统磁盘镜像
查看磁盘分区 查看系统的磁盘数据与容量: 用format查看一下磁盘的情况,0号盘是c1t0d0,系统源磁盘,1号盘是c1t1d0,新增加磁盘,作为镜像盘使用. 注意:两块硬盘的容量最好相等,如果镜像 ...
- bjut校园网自动登录
主要是懒得每次上网都需要打开网页=.= logon.bat @echo off mode con: cols=40 lines=15 color 0a title 登录ing... rem 获得IP ...
- 实现当前目录下开启CMD
我们都知道在WIN7下,可以按shift+鼠标右键->在此处打开命令窗口 或者在 输入cmd,回车 那么,怎样去实现这样的功能呢? //当前目录下开启CMD #include <stdio ...
- Qt实现简易计算器
麻烦到不能再麻烦的实现,简单到不能再简单的思路. calc.h #ifndef CALC_H #define CALC_H #include <QtWidgets/QMainWindow> ...
- Spring框架学习笔记（9）——API接口设计相关知识及具体编码实现
最近需要设计一个API服务器,想要把API接口搞得规范一下,就通过网上搜集到了一些资料,以下便是自己的一些理解以及相关的具体实现 本文采用的是spring boot+maven的方案 restful规 ...
- CentOS 使用yum安装 pip
pip这个功能很不错,可以用来下载很多东西. 笔者使用的是CentOS Linux release 7.2.1511 (Core)这个版本. 查询版本的语句: cat /etc/redhat-rele ...
- HDU 1005 Number Sequence(矩阵快速幂，快速幂模板)
Problem Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1 ...
- java8数组
public class jh_01_为什么需要数组 { public static void main(String[] args) { int [] arr = new int[5]; // in ...
- 【WPF学习】第四十三章 路径和几何图形
前面四章介绍了继承自Shape的类,包括Rectangle.Ellipse.Polygon以及Polyline.但还有一个继承自Shape的类尚未介绍,而且该类是到现在为止功能最强大的形状类,即Pat ...
- 第3章 JDK并发包（二）
3.1.2 重入锁的好搭档:Condition条件 它和wait()和notify()方法的作用是大致相同的.但是wait()和notify()方法是和synchronized关键字合作使用的,而Co ...