CSS读书笔记（3）---清除浮动的几种方法
浮动元素容易造成页面错位现象。下面说说关于清除浮动的几种方法。
首先。先创建一个浮动导致错位的页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS---浮动</title>
<style>
.float-left{
float: left;
width: 200px;
height: 200px;
border: 2px solid red;
}
.float-right{
float: right;
width: 200px;
height: 200px;
border: 2px solid blue;
}
.float-box{
background-color: pink;
}
.no-float{
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<div class="float-box">
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
</div>
<div class="no-float">被浮动影响地元素</div>
</body>
</html>
浮动导致的错位HTML结构
可以看出，左右浮动元素和class为no-float的正常元素重叠了。而且左右浮动元素由于浮动，没法撑开父元素float-box的高度，因此父元素的背景元素也没有显示出来。
解决这个问题，一般可以用下面几个方法：
- 在浮动元素的父元素也即是class为float-box的元素最后加入一个div标签,
<div class="float-box">
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
<div class="clear-float"></div>
</div>属性设置如下：
.clear-float{
clear:both;
}这样就可以清除浮动了并且父元素float-box也有高度了。
- 在浮动元素的父元素之后加入BR标签，<br/>标签具有clear属性，其属性值为left/right/all。
<div class="float-box">
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
<br clear="all"/>
</div>这方法的效果同第一种方法。
- 在浮动元素的父元素中加入overflow属性。如下
.float-box{
overflow: hidden;
background-color: #eee;
}overflow:hidden;但在内容过多导致溢出时会自动隐藏多余的内容
利用overflow:hidden涉及到BFC块级格式化上下文。通过在父元素中设置
- float:left/right;
- overflow除了visible之外的值，
- display (table-cell，table-caption，inline-block)
- position（absolute，fixed）
- fieldset元素
均可以触发BFC，BFC可以闭合浮动，因此可以达到清除浮动的效果。
- 利用伪类:after消除浮动。可以理解为在浮动元素之后加入了一个伪类控制的伪类层，这是一个没有高度没有内容并且带有clear:both属性的层，可以消除浮动。
.float-box:after{
display: block;
visibility: visible;/*设置伪类层为块元素并且可见*/
clear:both;/*清除浮动*/
height: 0；
line-height:0;
font-size:;
content: "";/*伪类层内容清空*/
}最后一种方法更深的分离了HTML和CSS，更加方便我们维护页面。
CSS读书笔记（3）---清除浮动的几种方法的更多相关文章
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
- CSS 小结笔记之清除浮动
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...
- 活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
- css清除浮动的几种方法整理
四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...
- [css]浮动-清除浮动的3种方法
清除浮动的方法: 内墙法 注: 这是个奇淫技巧,没什么原理可言,记住即可 这个技巧又使得父box重新可以被子box撑开高度了. 隔墙法-适用于2个box之间上下排列 由于2个box高度依旧是0, 彼此 ...
- css清除浮动的8种方法以及优缺点
浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...
- CSS 清除浮动的4种方法
此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...
- CSS 清除浮动的几种方法
导读: CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,Float(浮动),往往是用于图像,使得文字围绕图片的效果,而它在布局时一样非常有用.不过有利也有弊,使用浮动 ...
- CSS 清除浮动的四种方法
在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...
随机推荐
- android keystore的生成和使用
android要求所有的程序必须有签名,否则就不会安装该程序.在我们开发过程中,adt使用debug keystore,在 preference->android->buid中设置.deb ...
- 转载：Java中的Checked Exception——美丽世界中潜藏的恶魔？
转自 Amber-Garden 的 博客 https://www.cnblogs.com/loveis715/p/4596551.html 在使用Java编写应用的时候,我们常常需要通过第三方类库来帮 ...
- 家谱（gen）——洛谷P2814
#include <iostream> #include <string> #include <map> using namespace std; map < ...
- GDB调试工具、动态加载、内存管理（day04）
一.程序中的错误处理 在系统中定义了一个全局变量errno.在这个全局变量中存放着系统调用或者库函数出错的信息(错误编号).然后根据错误编号获取错误信息. 举例说明: 打开一个文件,如果这个文件不存在 ...
- 构造函数和初始化表、this指针与常函数、析构函数、拷贝构造与拷贝赋值（day05）
十四 构造函数和初始化表 ... 初始化表 )语法形式 class 类名{ 类名(形参表):成员变量1(初值),...{} }; )必须要使用初始化表的场景 -->如果有类 类型的成员变量,而该 ...
- JUnit单元测试实践：测试工具类和方法(EmptyUtils)
以前的时候(读大学时),我认为写单元测试太费事了.现在,我改变看法了. 工作中,为了提高Web开发的质量和效率,近期又为了保证自己的工具类等一系列可复用组件的质量,我煞费苦心地开始认真学习和撰写单元测 ...
- WebApplicationContext初始化(转)
ApplicationContext是Spring的核心,Context我们通常解释为上下文环境,我想用“容器”来表述它更容易理解一些,ApplicationContext则是“应用的容器”了:在We ...
- 使用Python生成源文件的两种方法
利用Python的字符串处理模块,开发者能够编写脚本用来生成那些格式同样的C.C++.JAVA源程序.头文件和測试文件,从而避免大量的反复工作. 本文概述两种利用Python string类生成jav ...
- java5核心基础之泛型（3）-泛型作用于编译阶段-怎样将String对象传入Integer类型的泛型对象中？
泛型作用于编译阶段: 泛型是作用于编译阶段,在编译阶段控制类型,以确保在编写代码的时候仅仅能传入指定类型数据到泛型集合对象中去. 怎样验证呢,贴代码例如以下: package highBasic.ge ...
- 2015多校联合训练赛 hdu 5308 I Wanna Become A 24-Point Master 2015 Multi-University Training Contest 2 构造题
I Wanna Become A 24-Point Master Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 ...