您的位置：首页 > Web前端 > css > 正文

css清除浮动

更多时间：2015-4-17 类别：Web前端浏览量：1439

css清除浮动

css清除浮动

一、使用浮动时出现的情况

1.使块元素在一行显示
2.使内嵌元素支持宽高
3.不设置宽高的时候宽度由内容撑开
4.换行不被解析
5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止

二、清除浮动的方法

1、用clearfix清除浮动


<html > 
<head> 
<title> css用clearfix清除浮动实例</title> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
</head> 
<body> 
<style type="text/css">... 
/**//**//**//*所有主流浏览器都支持 :after 伪元素。*/ 
.clearfix:after{...}{}{...}{content:".";display:block;height:0;clear:both;visibility:hidden} 
.clearfix{...}{}{...}{*+height:1%;}/**//**//**//*不知道有什么用处，不加ie7也没有问题*/ 
.box{...}{}{...}{ background:#111;width:500px; position:relative;} 
.l{...}{}{...}{float:left; background:#333;width:200px; height:100px;} 
.r{...}{}{...}{float:right;background:#666;width:200px; height:200px;} 
.s{...}{}{...}{width:100px; height:100px;background:#999;position:absolute;right:-50px;;} 
</style> 
<li class="box clearfix"> 
<li class="l">left</li> 
<li class="r">right</li> 
<li class="s">absolute</li> 
</li> 
</body> 
</html>

2、父级li定义 height



<style type="text/css">... 
.li1{...}{background:#000080;border:1px solid red;/height:200px;} 
.li2{...}{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{...}{float:left;width:20%;height:200px;background:#DDD} 
.right{...}{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<li class="li1"> 
<li class="left">Left</li> 
<li class="right">Right</li> 
</li> 
<li class="li2"> 
li2 
</li>

3、在浮动元素后面增加<br/>标签

<br/>标签有自带的清除浮动属性

4、在浮动元素后面增加一个清除浮动层


<li>

　　　　<li style="float:left"></li>

　　　　<li style="float:left"></li>

　　　　<li style="clear:both"></li>

　　</li>

5、给父级li定义overflow:auto样式



<style type="text/css">... 
.li1{...}{background:#000080;border:1px solid red;/**//*解决代码*/width:98%;overflow:auto} 
.li2{...}{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{...}{float:left;width:20%;height:200px;background:#DDD} 
.right{...}{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<li class="li1"> 
<li class="left">Left</li> 
<li class="right">Right</li> 
</li> 
<li class="li2"> 
li2 
</li>

6、父级li定义伪类:after 和 zoom



<style type="text/css">... 
.li1{...}{background:#000080;border:1px solid red;} 
.li2{...}{background:#800080;border:1px solid red;height:100px;margin-top:10px} 

 
  标签：css   
 
 


              上一篇：js分号的使用                	  
			  下一篇：JS实现金额大小写转换

   


  
      您可能感兴趣
				
					
  css实现水平垂直居中的方式有哪些（css让容器水平垂直居中的7种方式）
  css中分割线的渐变效果（CSS学习笔记之可重复渐变repeating-linear-gradient）
  css3中基本选择符（CSS3 clip-path 用法介绍详解）
  css导航栏特效（CSS导航栏及弹窗示例代码）
  css3边框和边界图片（css3 box-shadow阴影外阴影与外发光图示讲解）
  css3菜单特效（CSS3实现精美横向滚动菜单按钮）
  css 图片边缘虚化（CSS3对图片照片进行边缘模糊处理的实现）
  css圆角阴影代码（CSS实现曲面阴影效果的简单实例推荐）
  css3弹出动画效果（CSS3实现跳动的动画效果）
  css 圆角卡片样式（css实现带圆角三角型的示例代码）
  css语言是干嘛的（Css预编语言及区别详解）
  css line-height（CSS中的line-height行高属性学习教程）
  css用clearfix清除浮动
  css中outline
  css 页面加载样式（如何只在IE上加载CSS样式表）
  css样式中实现3d效果（利用纯CSS实现动态的文字效果实例）
鲢鳙钓底还是钓浮 流水的水域应怎样做钓（鲢鳙钓底还是钓浮）
入秋后的第二场苹果发布会来了 全新M1系列芯片登场（入秋后的第二场苹果发布会来了）
苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel（苹果正式发布自研芯片M1）
苹果自研芯片跑分对比 A16芯片排名靠后，M1系列霸榜（苹果自研芯片跑分对比）
X86处理器的梦魇 苹果M1自研芯片到底有多强（苹果M1自研芯片到底有多强）
泰剧《爱欲之神》Boom kitkong和Great合体杂志（泰剧爱欲之神Boomkitkong和Great合体杂志）

css清除浮动

css清除浮动

热门推荐

排行榜