浮动常见的几种属性值

float {left;  right;  none;  }

主要是定义元素朝哪个方向浮动;

元素浮动后的特性

  1. 在一行显示,父级的宽度放不下,自己折行;
  2. 支持宽高等样式;
  3. 不设置宽高时,宽度由内容撑开;
  4. 会按照我们指定的方向移动,碰到父级的边界或者前一个浮动元素就会停止浮动(与上一个浮动元素对齐);
  5. 元素浮动后,上下的margin不在叠行;

关于清浮动

  元素浮动以后,就撑不开父级的高度了,必须要给他的父级清浮动

  可以在浮动下 添加一个<br/>折行标签;也可以清浮动    

<br> 也同样具有clear属性
<br clear="all" />

清除浮动

clear 元素的某个方向不能有浮动元素
left;
right;
both;
none; clear 只会对写在他之前的元素起效果

元素浮动之后就撑不开父级的高度,或者说父级就包不住浮动元素的子元素,清浮动后,使元素依然可以撑开父级的高度

具体方法有下列几种:

  1. 给浮动父元素加高度
  2. 在浮动元素下边添加 <br/>标签
  3. 在浮动元素下边添加 <div class="clearFix"></div>
    .clearFix {
    clear: both;
    }
  4. 用伪元素
    before 在元素内容前边添加内容
    after 在元素末尾添加内容

    通过conntent 添加进去的内容,叫做伪元素

    .clearFix:after {
    content: "";
    display: block;
    clear: both;
    }
    如果要兼容IE低版本的话 需要
    .clear {
    zoom: 1;
    }

    当前主流的清浮动的方式就是利用伪类清浮动

关于浮动与清浮动 float的更多相关文章

  1. CSS浮动与清浮动

    浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...

  2. web前端浮动、清浮动问题

    浮动的问题如下一一列举如有考虑不周的欢迎欢迎大家补充: 1.浮动,兼容性问题3px的问题,双边距的问题 在平时工作的过程中,解决3px的问题,一般都是初始化*{margin:0;padding:0px ...

  3. day44--浮动和清浮动基本小结

    浮动和清浮动 一:浮动 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普 ...

  4. web开发:清浮动

    一.display总结 二.overflow 三.浮动布局 四.清浮动 五.清浮动的方式 一.display总结 <!DOCTYPE html> <html> <head ...

  5. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  6. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  7. float浮动-清浮动BFC渲染机制

    float浮动,用于横向布局. 起初的横向布局都用display:inline-block,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格:font-size:0 ...

  8. float布局打破标准流,神助攻clear清浮动

    布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...

  9. CSS清浮动处理(Clear与BFC)

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

随机推荐

  1. codeforces 892E(离散化+可撤销并查集)

    题意 给出一个n个点m条边的无向联通图(n,m<=5e5),有q(q<=5e5)个询问 每个询问询问一个边集{Ei},回答这些边能否在同一个最小生成树中 分析 要知道一个性质,就是权值不同 ...

  2. js的基础(平民理解的执行上下文/调用堆栈/内存栈/值类型/引用类型)

    与以前的切图比较,现在的前端开发对js的要求似乎越来越高,在开发中,我们不仅仅是要知道如何运用现有的框架(react/vue/ng), 而且我们对一些基础的知识的依赖越来越大. 现在我们就用平民的方法 ...

  3. Oracle: 通过命令行下载安装文件

    1. 导出oracle cookies 参考:https://blog.pythian.com/how-to-download-oracle-software-using-wget-or-curl/ ...

  4. 运行mapreduce - java.lang.InterruptedException

    错误日志: 2018-11-19 05:23:51,686 WARN [main] util.NativeCodeLoader (NativeCodeLoader.java:<clinit> ...

  5. Office EXCEL 复制粘贴 变成 #value,#REF!,#DIV怎么办

    这些都是由于相对引用造成的,如下所示,我鼠标点进去之后变成了I10/L10,当数字和文字或空单元格进行加减乘除的运算就会出现这种问题   使用选择性粘贴,只粘贴数值即可.

  6. Office WORD WPS如何取消拼写检查

    1 审阅-修订-修订选项-拼写,全部取消勾选.

  7. 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取

    在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 O ...

  8. iOS中3种正则表达式的使用

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email = @“nijino_saki@163.com”:  NSString *regex ...

  9. soapUI系列之—-01 介绍soapUI简介,groovy 简介

    1.soapui简介 SoapUI是一个自由和开放源码的跨平台功能测试解决方案.通过一个易于使用的图形界面和企业级功能,SoapUI让您轻松,快速创建和执行自动化功能.回归.合规和负载测试.在一个测试 ...

  10. 【剑指Offer面试题】 九度OJ1517:链表中倒数第k个结点

    鲁棒性是指程序可以推断输入是否符合规范要求,并对不和要求的输入予以 合理的处理. 题目链接地址: http://ac.jobdu.com/problem.php?pid=1517 题目1517:链表中 ...