您的位置：首页 > 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学习笔记之可重复渐变repeating-linear-gradient）
  css3渐变背景教程（css3实现背景图片颜色修改的多种方式）
  css实现水平垂直居中的方式有哪些（css让容器水平垂直居中的7种方式）
  css3实现3d效果教程（纯 CSS3实现的霓虹灯特效）
  html怎么去除css边框（Html/CSS前端实现文字边框阴影效果）
  css42个实用技巧（你必须要知道的几个CSS技巧）
  html样式中css怎么设置行高（CSS设置HTML元素的高度与宽度的各种情况总结）
  CSS错误排查方法
  CSS百分比定义高度的问题
  css3做出效果（深入解读CSS3中transform变换模型的渲染）
  divcss页面布局步骤（横向两列布局左列固定，右列自适应的4种CSS实现方式）
  css中浮动的方式有几种方式（浅谈css中浮动和清除浮动带来的影响）
  css怎么设置div边框（div+css实现带箭头的面包屑导航栏）
  动画用css3还是js（前端制作动画的几种方式css3，js）
  css3设置元素的边框图像（详解CSS3 用border写 空心三角箭头 两种写法）
  DIV+CSS网页布局时常犯的几个错误
二次创业 的富士胶片，在进博会上首次展示完成转型后的全线医疗产品（二次创业的富士胶片）
富士胶片 中国 我们对上海的信心没有任何改变（富士胶片中国）
赢麻了 富士公布2021年度财报 营利同比增长240（富士公布2021年度财报）
医事文化谈屑 | 古人的名 字 号（医事文化谈屑古人的名）
（）
网友很惭愧，自己写了很多年的字，到头来还不如一名小学生写的好（自己写了很多年的字）

css清除浮动

css清除浮动

热门推荐

排行榜