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 ...
随机推荐
- MySQL8.0 MIC高可用集群搭建
mysql8.0带来的新特性,结合MySQLshell,不需要第三方中间件,自动构建高可用集群. mysql8.0作为一款新产品,其内置的mysq-innodb-cluster(MIC)高可用集群的技 ...
- Thread.yield( )方法
Java线程中的Thread.yield( )方法,译为线程让步.顾名思义,就是说当一个线程使用了这个方法之后,它就会把自己CPU执行的时间让掉,让自己或者其它的线程运行,注意是让自己或者其他线程运行 ...
- Elasticsearch与中文分词配置
一. elasticsearch on windows 1.下载地址: https://www.elastic.co/cn/downloads/elasticsearch 如果浏览器下载文件慢,建议使 ...
- JDBC访问数据库的具体步骤(MySql + Oracle + SQLServer)
* 感谢DT课堂颜群老师的视频讲解(讲的十分仔细,文末有视频链接) import java.sql.Connection; import java.sql.DriverManager; import ...
- [Effective Java 读书笔记] 第三章类和接口 第十六条
第十六条 复合优先于继承 如果不确定B和A的关系是,is-a的关系,B确实也是A,那么久不应该使用B继承A,否则会暴露实现细节, 你的实现都会限制在原始的实现上. 书中举的第一个例子,实现了一个类ex ...
- 《Head first设计模式》之观察者模式
观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新. 客户有一个WeatherData对象,负责追踪温度.湿度和气压等数据.现在客户给我们提了个 ...
- 跨域的两种解决方法jsonp和CORS
1.跨域 什么是跨域? 当你请求的url是不同源的数据的时候,浏览器一般会抛出请求跨域的错误,如下图: 造成跨域的原因? 即你违反了浏览器的同源策略的限制=>阻止一个域的js脚本和另外一个域的内 ...
- [Redis-Python]发布订阅通过Redis异步发送邮件
接收订阅 #!/usr/bin/env pyhton # coding:utf-8 # @Time : 2020-02-16 21:36 # @Author : LeoShi # @Site : # ...
- vux-- Vue.js 移动端 UI 组件库
1.使用 安装或更新: npm install vux --save npm install vux-loader --save 如果没有安装less: npm install less less-l ...
- Java 添加超链接到Excel文档
超链接即内容链接,通过给特定对象设置超链接,可实现载体与特定网页.文件.邮件.网络等的链接,点击链接载体可打开链接目标,在文档处理中是一种比较常用的功能.本文将介绍通过Java程序给Excel文档添加 ...