float:让元素浮动,取值:left(左浮动)、right(右浮动)

clear:清除浮动,取值:left(清除左浮动)、right(清除右浮动)、both(同时清除上面的左浮动和右浮动)

1.CSS浮动

浮动的元素,将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止。

浮动的元素,不再占空间了,并且,浮动元素的层级要高于普通元素

浮动的元素,一定是“块元素”。不管它原来是什么元素。

如果浮动的元素,没有指定宽度的话,浮动后它将尽可能的变窄。因此,浮动元素一般要定宽和高。

一行的多个元素,要浮动一起浮动。

浮动的功能:可以实现将多个块元素并列排版。

如何让包围元素,包住浮动元素?

你就需要在浮动元素的下边,使用清除浮动操作。

2.CSS清除浮动

CSS清除浮动的功能有两个:(1)可以包围元素从“视觉上”包住浮动元素(2)清除之下的其它元素将恢复默认排版。

有浮动,就得有清除。

如果包围元素指定了高度了,那么可以不使用清除功能。

参考链接:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

CSS浮动和清除的更多相关文章

  1. CSS 浮动和清除

    CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...

  2. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  3. 六.CSS浮动与清除

    浮动 把元素从常规文档流中取出.是元素脱离常规文档流 浮动的作用: ①实现文本绕排图片效果 ②让原本在上下方向上堆叠的块级元素可以变成左右并列,从而实现多栏布局 文本绕排图片 首先HTML代码如下 & ...

  4. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  5. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  6. CSS浮动并清除浮动(造成的影响)

    一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...

  7. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  8. CSS浮动和清除浮动

    1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...

  9. css浮动以及清除

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

随机推荐

  1. [Leetcode] 3.Longest Substring Without Repeating Characters(unordered_map)

    通过把未访问的结点放到unordered_map中来判断是否重复,代码如下: class Solution { public: int lengthOfLongestSubstring(string ...

  2. BZOJ 2326 数学作业(分段矩阵快速幂)

    实际上,对于位数相同的连续段,可以用矩阵快速幂求出最后的ans,那么题目中一共只有18个连续段. 分段矩阵快速幂即可. #include<cstdio> #include<iostr ...

  3. hadoop MapReduce辅助排序解析

    1.数据样本,w1.csv到w5.csv,每个文件数据样本2000条,第一列是年份从1990到2000随机,第二列数据从1-100随机,本例辅助排序目标是找出每年最大值,实际上结果每年最大就是100, ...

  4. [LOJ#2542] [PKUWC2018] 随机游走

    题目描述 给定一棵 n 个结点的树,你从点 x 出发,每次等概率随机选择一条与所在点相邻的边走过去. 有 Q 次询问,每次询问给定一个集合 S,求如果从 x 出发一直随机游走,直到点集 S 中所有点都 ...

  5. [Vue源码分析] v-model实现原理

    最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...

  6. BZOJ1061:[NOI2008]志愿者招募——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1061 https://www.luogu.org/problemnew/show/P3980 申奥 ...

  7. 洛谷 CF1043F Make It One 解题报告

    CF1043F Make It One 题意 从一堆数中选择最少的数,使它们的\(\gcd=1\) 输入输出格式 输入格式 第一行:一个正整数\(n\). 第二行:\(n\)个正整数,给出了这个数列. ...

  8. mysql定时器,定时查询数据库,把查询结果插入到一张表中

    1.有两张表order_repayment_detail,msg_sim ,需要把前者中的按时间过滤出来的信息插入到短信发送表中,可以每晚12点钟查询执行一次查询. 创建存储过程,这里的存储过程主要提 ...

  9. ACM2647拓扑排序逆运算

    2647题是对工人排序问题,不是从头到尾排序,而是从尾到头排序: 代码中用到vector和queue容器,权当练习. 用广搜进行拓扑排序的逆运算. #include<iostream> # ...

  10. 关于深度学习(deep learning)的常见疑问 --- 谷歌大脑科学家 Caffe缔造者 贾扬清

    问答环节 问:在finetuning的时候,新问题的图像大小不同于pretraining的图像大小,只能缩放到同样的大小吗?" 答:对的:) 问:目前dl在时序序列分析中的进展如何?研究思路 ...