float浮动与清除浮动
浮动:
浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止。文档的普通流中的块框会当浮动框不存在一样。但会影响内联框(通常是文本)的排列。
属性值有:left,right,none;
当浮动元素的父元素没有其他元素内容的时候,父元素会出现“勾搭塌陷”的情况,浮动元素脱离了父元素。为了避免这种情况,需要清除浮动。
清除浮动:
方法一:
clear:both;
在需要清除浮动的地方都加上这句话可以达到目标,兼容性好。但会增加重复代码。
方法二:
使用overflow:hidder; 或则zoom:1;
浮动元素会回到容器里面。
方法三:
:afte伪元素
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清楚浮动。
可完美兼容各主流浏览器。
.box{
backgroudn:green;
border:1px solid red;
}
.box img{
float:left;
}
.box p{
float:right;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1;//触发hasLayout,兼容IE6和IE7
}
<div class="box">
<img src="">
<p>text</p>
</div>
用伪元素方法更合适一点。
注:不清除浮动,容器是不能被撑开的,浮动元素脱离在外面,容器的背景,内外边距都无效。
float浮动与清除浮动的更多相关文章
- float闭合(清除浮动)和CSS HACK
一.float 闭合(清除浮动) 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. <style>.c ...
- 浮动(float)与清除浮动(clear)
上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...
- CSS基础(float属性与清除浮动)
3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left | right | none 特点: 浮动的元素不占位置,脱离了标准文档流 ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- CSS浮动与清除浮动(overflow)例子
在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...
- 重温前端基础之-css浮动与清除浮动
文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...
- CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
随机推荐
- nginx地址重写
1. 域名重定向 server_name wx.he.com weixin.ha.com; if ($http_host !~* "wx\.he\.com"){ rewrite ^ ...
- SuSE Apache2 VirtualHost Build
1,linux version:openSuSE 12.1 2,add ServerName to DNS(johv.ts.com ,use the same IP) 3,mkdir /srv/www ...
- Volocity循环高级用法
#foreach($announcementDo in $announcementList) #set($listSize=$!announcementList.size() - 1) #if(($v ...
- 理解JDBC和JNDI
下面的英文是我找过来的,因为是英文所以不敢翻译出来误导别人,但是它描述的确实恰到好处,比所谓网上的JNDI和JDBC云云的解释要精辟很多,如果遇到不认识的单词,用有道吧~~:) The Java Na ...
- UI design principles
Master's conclusion: 1. fix a color pattern 2. fix the frames the UI will use 3. fix the subject tha ...
- 数据库SQL 多态
Sealed关键字:密封类 该类无法被继承 部分类: Namespace 命名空间 虚拟文件夹 Partial关键字 可以将一个类拆分成多个部分,分别放在多个文件里 多态: 1.编译多态 函数重载 2 ...
- HttpContext.Current 的缺陷
了解ASP.NET的开发人员都知道它有个非常强大的对象 HttpContext,而且为了方便,ASP.NET还为它提供了一个静态属性HttpContext.Current来访问它,今天的博客打算就从H ...
- extjs grid 单元格 多选
new Ext.grid.CellSelectionModel({ last : false, // 上一次选中的单元格 selections : [], // 选择区缓存 handleMouseDo ...
- Java编程思想(一):大杂烩
在java中一切都被视为对象.尽管一切都是对象,但是操纵的标识符实际上是对象的一个引用,可以将引用想象成是遥控器(引用)来操纵电视机(对象).没有电视机,遥控器也可以单独存在,即引用可以独立存在,并不 ...
- java使用json将HashMap转化成javabean小例子
import java.util.HashMap; import java.util.Iterator; import java.util.Map; import net.sf.json.JSONOb ...