CSS布局中浮动问题的四种解决方案
一、起因：
子盒子设置浮动之后效果：
由此可见，蓝色的盒子设置浮动之后，因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子高度塌陷。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱
二、解决方案：
- 父盒子设置固定高度
- 内墙法
- 伪元素清除法
- overflow:hidden
（1）父盒子设置固定高度
虽然，给父盒子设置了固定高度能暂时解决我们的问题，但是它的使用不灵活，如果未来子盒子的高度需求发生了改变(网页的多处地方)，那么我们得手动需要更改父盒子的高度。后期不易维护。
应用：网页中盒子固定高度区域，比如固定的导航栏。
缺点：使用不灵活，后期不易维护
（2）内墙法
在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置 clear:both；属性。clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素的破坏性</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child">儿子</div>
<div class="clearfix"></div>
</div>
</body>
</html>
应用：网页中应用不多，只是为了引导下一个清除浮动的方式。
缺点：结构冗余
（3）伪元素清除法
内墙法是在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。
那么正好在css3的属性用法中整好有个选择器也完全符合这个用法，伪元素选择器。伪元素选择器很简单。就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，允许为元素的某些部分设置样式。
（4）overflow:hidden
CSS布局中浮动问题的四种解决方案的更多相关文章
- 关于for循环中使用setTimeout的四种解决方案
我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此 ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- 认识和理解css布局中的BFC
认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- mysql中模糊查询的四种用法介绍
下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] ...
- JAVA中集合输出的四种方式
在JAVA中Collection输出有四种方式,分别如下: 一) Iterator输出. 该方式适用于Collection的所有子类. public class Hello { public stat ...
随机推荐
- 2020牛客暑假多校训练营 第二场 H Happy Triangle set 线段树 分类讨论
LINK:Happy Triangle 这道题很容易. 容易想到 a+b<x a<x<b x<a<b 其中等于的情况在第一个和第三个之中判一下即可. 前面两个容易想到se ...
- luogu P4008 [NOI2003]文本编辑器 splay 块状链表
LINK:文本编辑器 这个东西感觉块状链表写细节挺多 (块状链表本来就难写 解释一下块状链表的做法:其实是一个个数组块 然后利用链表给链接起来 每个块的大小为sqrt(n). 这样插入删除的时候直接暴 ...
- Spring学习总结(8)-接口多个实现类的动态调用
需求描述:当一个接口有2个以上的实现类时,调用方需要根据参数选择只其中一个实现类 Spring版本:5.1.8.RELEASE 1. 接口和实现类 /** * 接口 */ public interfa ...
- MySQL的utf8问题
作者:brightwang 原文:https://www.jianshu.com/p/ab9aa8d4df7d 有时候用MySQL存储一些特殊字符时,有出现乱码问题. 我用的是UTF-8编码的客户端, ...
- SpringAOP 面向切面编程
AOP的相关概念 AOP:全称是 Aspect Oriented Programming 即:面向切面编程. 简单的说它就是把我们程序重复的代码抽取出来,在需要执行的时候,使用动态代理的技术,在不修改 ...
- “随手记”开发记录day04
今天完成了添加收入和支出的页面,其实挺简单的就是里面的那个图表有些难搞,你得把每个图标和文字对应起来 挺费事的 话不多说,上效果 其中点击旋转按钮转换收入支出是我们找了好久才找出来这个方法的,太不容易 ...
- 新老版本vue-cli的安装及创建项目等方式的比较
vue-cli 3.0 正式版于2018年8月发布,截至到2020年08月05日版本已经更新到4.4.6.Vue CLI 的包名称由 vue-cli 改成了 @vue/cli,目前网上很多的Vue项目 ...
- Docker 搭建 SonarQube
Docker 搭建 SonarQube Docker 搭建 SonarQube 步骤 创建项目目录 mkdir -p /usr/local/sonarqube && cd /usr/l ...
- 一个试图了解JVM内存模型的两年经验的初级程序员，透彻！
所有的编程语言中都有内存模型这个概念,区别于微架构的内存模型,高级语言的内存模型包括了编译器和微架构两部分.我试图了解了Java.C#和Go语言的内存模型,发现内容基本大同小异,只是这些语言在具体实现 ...
- 字段解析之OopMapBlock（4）
OopMapBlock是一个简单的内嵌在Klass里面的数据结构,用来描述oop中包含的引用类型属性,即该oop所引用的其他oop在oop中的内存分布,然后就可以根据当前oop的地址找到所有引用的其他 ...