CSS浮动和清除
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浮动和清除的更多相关文章
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
- CSS浮动与清除浮动(overflow)例子
在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...
- 六.CSS浮动与清除
浮动 把元素从常规文档流中取出.是元素脱离常规文档流 浮动的作用: ①实现文本绕排图片效果 ②让原本在上下方向上堆叠的块级元素可以变成左右并列,从而实现多栏布局 文本绕排图片 首先HTML代码如下 & ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- css浮动与清除浮动
css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...
- CSS浮动并清除浮动(造成的影响)
一.浮动 CSS浮动 CSS float浮动的深入研究.详解及拓展(一) CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...
- 重温前端基础之-css浮动与清除浮动
文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...
- CSS浮动和清除浮动
1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...
- css浮动以及清除
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
随机推荐
- [剑指Offer] 47.求1+2+3+...+n
题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). [思路]用&&的短路思想来求和 ...
- table 标签 语法
- byte字节的输入流 建议使用字节数组形式接受内容 因为当输入流是汉字时候 会超出字节的范围 出现无法读取的现象
byte字节的输入流 建议使用字节数组形式接受内容 因为当输入流是汉字时候 会超出字节的范围 出现无法读取的现象
- 【bzoj2653】middle 可持久化线段树区间合并
题目描述 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右端点在[ ...
- 个人vim配置
YouCompletMe支持golang cd .vim/bundle/YouCompleteMe ./install.sh --clang-completer --go-completer clan ...
- HUD.2544 最短路 (Dijkstra)
HUD.2544 最短路 (Dijkstra) 题意分析 1表示起点,n表示起点(或者颠倒过来也可以) 建立无向图 从n或者1跑dij即可. 代码总览 #include <bits/stdc++ ...
- 《时间序列分析及应用:R语言》读书笔记--第二章 基本概念
本章介绍时间序列中的基本概念.特别地,介绍随机过程.均值.方差.协方差函数.平稳过程和自相关函数等概念. 2.1时间序列与随机过程 关于随机过程的定义,本科上过相关课程,用的是<应用随机过程&g ...
- 使用snmp4j实现Snmp功能(二)
相关链接:Snmp学习笔记使用snmp4j实现Snmp功能(一)使用snmp4j实现Snmp功能(二)使用snmp4j实现Snmp功能(三) 前一篇文章讲了如何用snmp4j实现set和get的功能, ...
- Codeforces Round #392 (Div. 2) A B C 水 模拟 暴力
A. Holiday Of Equality time limit per test 1 second memory limit per test 256 megabytes input standa ...
- 树莓派使用Samba共享文件夹
转载自:http://raspberrypihq.com/how-to-share-a-folder-with-a-windows-computer-from-a-raspberry-pi/ Shar ...