浮动:

浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止。文档的普通流中的块框会当浮动框不存在一样。但会影响内联框(通常是文本)的排列。

属性值有: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浮动与清除浮动的更多相关文章

  1. float闭合(清除浮动)和CSS HACK

    一.float 闭合(清除浮动) 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. <style>.c ...

  2. 浮动(float)与清除浮动(clear)

    上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...

  3. CSS基础(float属性与清除浮动)

    3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left  |  right  |  none 特点: 浮动的元素不占位置,脱离了标准文档流 ...

  4. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  5. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  6. [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  7. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  8. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  9. CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

随机推荐

  1. 帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  2. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

  3. JAX-WS(三)构建简单webservice部署到tomcat上

    前言: 虽然构建本地的jax-ws的webservice很简单,但要部署到tomcat上要绕过点弯. tomcat本身和jdk都没有jaw-ws的API,所以部署的时候需要额外做点事情,有两种选择 1 ...

  4. 通用窗口类 Inventory Pro 2.1.2 Demo1(下续篇 ),物品消耗扇形显示功能

    本篇想总结的是Inventory Pro中通用窗口的具体实现,但还是要强调下该插件的重点还是装备系统而不是通用窗口系统,所以这里提到的通用窗口类其实是通用装备窗口类(其实该插件中也有非装备窗口比如No ...

  5. mysql 执行状态分析 show processlist

    SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此信息.如果您有SUPER权限,您可以看到所有线程.否则,您只能看到您自己的线程( ...

  6. [转] java书籍(给Java程序猿们推荐一些值得一看的好书 + 7本免费的Java电子书和教程 )

    7本免费的Java电子书和教程 1. Thinking in Java (Third Edition) 本书的作者是Bruce Eckel,它一直都是Java最畅销的免费电子书.这本书可以帮助你系统的 ...

  7. Appium-android环境的快速搭建

    1.Android的要求: Android的sdk api>=16 appium支持android在linux,osx(mac),window平台 2.Appium的安装与启动: 安装: (1) ...

  8. 控件ListView

    ListView的简单用法,先在布局文件中添加ListView控件: 接下来修改MainActivity中的代码: 由上面的代码可以知道,数据是无法直接传递给ListView的,需要借助适配器来完成. ...

  9. List, Set, Map是否继承自Collection接口?

    List, Set, Map是否继承自Collection接口? 答:List,Set是Map不是

  10. HDU 1728 逃离迷宫(BFS)

    Problem Description 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地方是空地,gloria可以穿越,有 ...