关于浮动与清浮动 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 ...
随机推荐
- 实现浏览器兼容的innerText
今天学习到了FF不支持innerText,而IE.chrome.Safari.opera均支持innerText. 为了各个浏览器能兼容innerText,必须对js做一次封装. 为啥能实现兼容呢?原 ...
- Java面试题总结之数据库与SQL语句
1.有3 个表,表结构如下: Student 学生表(学号,姓名,性别,年龄,组织部门) Course 课程表(编号,课程名称) Sc 选课表(学号,课程编号,成绩). 1)写一个SQL 语句, ...
- CSS制作简单图标
CSS制作图标包括知识点如border-width.border-style.border-color.border-radius.对元素的定位拼接.旋转等结合起来. 图标效果如下(拖动滑块可缩放图标 ...
- C# 读自己的资源文件
Assembly assm = this.GetType().Assembly;//Assembly.LoadFrom(程序集路径); foreach (string resName in assm. ...
- 【转载】同步和互斥的POSIX支持(互斥锁,条件变量,自旋锁)
上篇文章也蛮好,线程同步之条件变量与互斥锁的结合: http://www.cnblogs.com/charlesblc/p/6143397.html 现在有这篇文章: http://blog.cs ...
- webx启动流程
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTFRpYW5jaGFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- Office2010,PPT,EXCEL如何插入日历控件
1 在Office2010中插入其他控件,然后找到日历控件 2 十字架随便在Excel中绘制一下,得到一个日历控件,注意此时还是在设计模式下,在设计模式下日历控件不是正常状态,你还是可以双击这个控 ...
- Visual Studio VS如何拷贝一个项目的窗体文件到另一个项目
1 比如下我有一个项目,我要把这个Config整个窗体和代码拷贝到另一个项目 2 在新项目中添加现有项,然后把这个窗体相关的三个文件都添加到新的项目中 3 然后在新窗体中就什么都有了 ...
- freemarker 模板
1 整体结构 模板(FTL 编程)是由例如以下部分混合而成的: Text 文本:文本会照着原样来输出. Interpolation 插值:这部分的输出会被计算的值来替换.插值由${和}所分隔(或者#{ ...
- crm使用soap删除下拉框
//C# 代码: //DeleteOptionSetRequest request = new DeleteOptionSetRequest(); //request.Name = "new ...