CSS，浮动及其影响
浮动(float)：
让默认文档流(标准文档流)下的元素漂浮起来，水平排列。
通俗点来说，浮动可以让元素浮到第二层，而其他没有浮动的元素就往上排，而我们是俯视去看的，所以往上顶的那个元素就会被遮住，这就带来了问题。解决方法，后面会有说。
float: 1. left----左浮
2. right------右浮
3. none ------不浮动
默认(标准)文档流：
说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
浮动带来的影响：
1. 行内元素在浮动之后，可以支持宽高。
p{
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
2. 文本会给浮动的元素让位，可以制作成文本环绕的效果。
p{
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
<body>
<p></p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落
</body>
3. 在没有给父级高度的情况下，子级浮动后，父级会没有高度。
这是没有给子级设置浮动的情况下：
div{
background-color: #f00;
}
p{
/*float: left;*/
width: 50px;
height: 50px;
border: 1px solid #000;
}
<div>
<p></p>
</div>
给子级设置浮动后：
div{
background-color: #f00;
}
p{
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
<div>
<p></p>
</div>
这里给出的解决方案主要是针对第三种的。
解决方法主要有几个，下面我就向大家一一介绍：
1. 在父级内容最后添加一个空的div，添加clear属性
clear-----left------清除左浮动
right------清除右浮动
both-----清除所有浮动
这个方法不推荐使用，因为他会添加大量的无用的标签，让页面的布局变的更加的复杂。
2. 给父级设置 overflow:hidden；
溢出隐藏，会触发bfc(block formatting context)块级格式化上下文
这个也不推荐使用，在和定位一起使用的时候，会产生其他的问题。
3. 使用伪元素 :after (推荐使用)
.clear:after{
content: ""; /*内容为空*/
height: 0;
line-height: 0;
display: block; /*块级元素*/
visibility: hidden; /*隐藏*/
clear: both; /*清除浮动*/
}
.clearfix{ /*兼容性问题*/
zoom: 1; /*ie678*/
}
4. 使用伪类元素(第三种的改进) 缺点，相比于第三种，有点不严谨
.clear:after,.clear:before{
content: ""; /*内容为空*/
display: block; /*块级元素*/
clear: both; /*清除浮动*/
}
.clearfix{ /*兼容性问题*/
zoom: 1; /*ie678*/
}
CSS，浮动及其影响的更多相关文章
- CSS浮动并清除浮动(造成的影响)
一.浮动 CSS浮动 CSS float浮动的深入研究.详解及拓展(一) CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- CSS浮动文摘
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 写在前面的话: 由于CSS内容比较多,没有精力从头到尾讲一遍,只能有 ...
- CSS浮动(float,clear)通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享：CSS浮动(float,clear)通俗讲解(转载)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- （转）经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
随机推荐
- python 网络编程之TCP传输&粘包传输
只有TCP有粘包现象,UDP永远不会粘包. 所谓粘包问题主要还是C/S两端数据传输时 因为接收方不知道消息之间的界限,不知道一次性提取多少字节的数据所造成的 根本原因:粘包是由TCP协议本身造成的,T ...
- NOI-OJ 2.2 ID:8758 2的幂次方表示
思路 可以把任意一个数转化为2^a+2^b+2^c+...+2^n 例如137的二进制为10001001,这就等效于2^7+2^3+2^0 以上结果如何通过程序循环处理呢?需要把数字n分解为上述公式, ...
- JN_0005：PS改变图片指定内容颜色
1,打开图片. 2,选择选区,抽取出独立图存 选中选区,按ctrl + alt + j ,抽取图层. 3,选中图层,再按住 ctrl,点击图层图标 的白色选区处,即可选中图层中的内容. 4,选中图层内 ...
- nohup + & 保证服务后台运行不中断
nohup和&后台运行,进程查看及终止 1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg … ] [ & ] 无论是否将 nohup 命令的输 ...
- Python-Django 模型层-单表查询
单表操作 -增加,删,改:两种方式:queryset对象的方法,book对象的方法 -改:需要用save() -get()方法:查询的数据有且只有一条,如果多,少,都抛异常 单表查询 -<1&g ...
- KNN与K-Means的区别
KNN(K-Nearest Neighbor)介绍 Wikipedia上的 KNN词条 中有一个比较经典的图如下: KNN的算法过程是是这样的: 从上图中我们可以看到,图中的数据集是良好的数据,即都打 ...
- Java：Spring @Transactional工作原理
本文将深入研究Spring的事务管理.主要介绍@Transactional在底层是如何工作的.之后的文章将介绍: propagation(事务传播)和isolation(隔离性)等属性的使用 事务使用 ...
- Eclipse IDE 添加jar包到Java工程中
操作系统:Windows 10 x64 工具1:Eclipse Java EE IDE for Web Developers. Version: Photon Release (4.8.0) 在Pac ...
- .net mvc 使用盛派Senparc.Weixin 上传图片接口
首先获取微信签名,Controller代码: public ActionResult MutualHelpAdd() { var jssdkUiPackage = JSSDKHelper.GetJsS ...
- 学习笔记: Expression表达式目录树详解和扩展封装
1. 表达式链接扩展封装,ORM常用 And Or /// <summary> /// 表达式访问者 /// </summary> public class Expressi ...