关于浮动与清浮动 float
浮动常见的几种属性值
float {left; right; none; }
主要是定义元素朝哪个方向浮动;
元素浮动后的特性
- 在一行显示,父级的宽度放不下,自己折行;
- 支持宽高等样式;
- 不设置宽高时,宽度由内容撑开;
- 会按照我们指定的方向移动,碰到父级的边界或者前一个浮动元素就会停止浮动(与上一个浮动元素对齐);
- 元素浮动后,上下的margin不在叠行;
关于清浮动
元素浮动以后,就撑不开父级的高度了,必须要给他的父级清浮动
可以在浮动下 添加一个<br/>折行标签;也可以清浮动
<br> 也同样具有clear属性
<br clear="all" />
清除浮动
clear 元素的某个方向不能有浮动元素
left;
right;
both;
none; clear 只会对写在他之前的元素起效果
元素浮动之后就撑不开父级的高度,或者说父级就包不住浮动元素的子元素,清浮动后,使元素依然可以撑开父级的高度
具体方法有下列几种:
- 给浮动父元素加高度
- 在浮动元素下边添加 <br/>标签
- 在浮动元素下边添加 <div class="clearFix"></div>
.clearFix {
clear: both;
} - 用伪元素
before 在元素内容前边添加内容
after 在元素末尾添加内容通过conntent 添加进去的内容,叫做伪元素
.clearFix:after {
content: "";
display: block;
clear: both;
}
如果要兼容IE低版本的话 需要
.clear {
zoom: 1;
}当前主流的清浮动的方式就是利用伪类清浮动
关于浮动与清浮动 float的更多相关文章
- CSS浮动与清浮动
浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...
- web前端浮动、清浮动问题
浮动的问题如下一一列举如有考虑不周的欢迎欢迎大家补充: 1.浮动,兼容性问题3px的问题,双边距的问题 在平时工作的过程中,解决3px的问题,一般都是初始化*{margin:0;padding:0px ...
- day44--浮动和清浮动基本小结
浮动和清浮动 一:浮动 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普 ...
- web开发:清浮动
一.display总结 二.overflow 三.浮动布局 四.清浮动 五.清浮动的方式 一.display总结 <!DOCTYPE html> <html> <head ...
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- float浮动-清浮动BFC渲染机制
float浮动,用于横向布局. 起初的横向布局都用display:inline-block,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格:font-size:0 ...
- float布局打破标准流,神助攻clear清浮动
布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...
- CSS清浮动处理(Clear与BFC)
在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...
随机推荐
- codeforces 892E(离散化+可撤销并查集)
题意 给出一个n个点m条边的无向联通图(n,m<=5e5),有q(q<=5e5)个询问 每个询问询问一个边集{Ei},回答这些边能否在同一个最小生成树中 分析 要知道一个性质,就是权值不同 ...
- js的基础(平民理解的执行上下文/调用堆栈/内存栈/值类型/引用类型)
与以前的切图比较,现在的前端开发对js的要求似乎越来越高,在开发中,我们不仅仅是要知道如何运用现有的框架(react/vue/ng), 而且我们对一些基础的知识的依赖越来越大. 现在我们就用平民的方法 ...
- Oracle: 通过命令行下载安装文件
1. 导出oracle cookies 参考:https://blog.pythian.com/how-to-download-oracle-software-using-wget-or-curl/ ...
- 运行mapreduce - java.lang.InterruptedException
错误日志: 2018-11-19 05:23:51,686 WARN [main] util.NativeCodeLoader (NativeCodeLoader.java:<clinit> ...
- Office EXCEL 复制粘贴 变成 #value,#REF!,#DIV怎么办
这些都是由于相对引用造成的,如下所示,我鼠标点进去之后变成了I10/L10,当数字和文字或空单元格进行加减乘除的运算就会出现这种问题 使用选择性粘贴,只粘贴数值即可.
- Office WORD WPS如何取消拼写检查
1 审阅-修订-修订选项-拼写,全部取消勾选.
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 O ...
- iOS中3种正则表达式的使用
1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email = @“nijino_saki@163.com”: NSString *regex ...
- soapUI系列之—-01 介绍soapUI简介,groovy 简介
1.soapui简介 SoapUI是一个自由和开放源码的跨平台功能测试解决方案.通过一个易于使用的图形界面和企业级功能,SoapUI让您轻松,快速创建和执行自动化功能.回归.合规和负载测试.在一个测试 ...
- 【剑指Offer面试题】 九度OJ1517:链表中倒数第k个结点
鲁棒性是指程序可以推断输入是否符合规范要求,并对不和要求的输入予以 合理的处理. 题目链接地址: http://ac.jobdu.com/problem.php?pid=1517 题目1517:链表中 ...