【响应式Web前端设计】CSS浮动(float,clear)讲解

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

   注意，以上这些理论，是指标准流中的div。小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。显然标准流已经无法满足需求，这就要用到浮动。      浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：

从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。

   这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。如果我们把div2采用右浮动，会是如下效果：

此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。

   目前为止我们只浮动了一个div元素，多个呢？下面我们把div2和div3都加上左浮动，效果如图：

同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。

clear属性（清除浮动的影响）
浮动的元素会影响到标准流中的元素所以要对受浮动影响的元素进行清除浮动的影响
clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.
clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.
clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.

【响应式Web前端设计】CSS浮动(float,clear)讲解相关推荐

【响应式Web前端设计】一文学会使用Bootstrap！
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具请先学习该文 ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
【响应式Web前端设计】CSS后代选择器和子代选择器
文章目录子代选择器:>号后代选择器:空格文章目录子代选择器:>号后代选择器:空格子代选择器:>号 .father>div{border: 2px solid blu ...
【响应式Web前端设计】CSS 定位详解
文章目录 1 position 属性的作用 2 static 属性值 3 relative,absolute,fixed 3.1 relative 属性值 3.2 absolute 属性值 3.3 f ...
【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
【响应式Web前端设计】HTML DOM padding 属性
定义和用法 padding 属性设置元素的内边距. padding 属性定义元素边框与元素内容之间的空间. 该属性可采取 4 个值: 如果规定一个值,比如 div {padding: 50px} - ...
【响应式Web前端设计】Register Demo
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>用户 ...
【响应式Web前端设计】Login Demo
body{background: url('../img/1.png')no-repeat center center fixed;background-size: cover;padding: 20 ...

【响应式Web前端设计】CSS浮动(float,clear)讲解

【响应式Web前端设计】CSS浮动(float,clear)讲解相关推荐

最新文章

热门文章