CSS中浮动的使用

CSS有两个性质

第一个是 :继承性

第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁

{ 里面分两种情况: 分别是 选中和没选中。

1.选不中的情况下,走继承性,(font,color,text都可以继承)继承性的权重为0

有多个父级都设置了这样的样式,走就近原则

2.选中了的情况下:得考虑三种情况

(a:权重问题,权重大,就选谁的样式; b:权重相同,谁在后选择谁; c:纯标签和类(class)没有可比性的,纯类(class)也没法和id进行比较。

}

标准文档流

浏览器的排版是根据元素的特征(块级和行级),从上往下,从左往右排版。这就是标准文档流。

其中有一个效果为 浮动:float:left/right;

效果:元素都加浮动,后面的元素会紧跟这前面的元素并排排列。

只要加了float,这个元素就会脱离标准文档流。

第一个加float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位。而第一个依然存在,所以就会叠加。

行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列。

display就没有任何意义了

浮动的元素会紧紧贴靠在一起

浮动的元素会文字环绕

(文字环绕)

拓展:使元素脱离标准流的方法

1. 浮动float    2 .绝对定位 position:absolute  3.固定定位 position:fixed;   (fixed 固定的意思)

浮动带来的坏处

1,给元素加了浮动,撑不起父级的高度了

清除浮动

1. 给浮动的父元素添加高度

2. 给父级添加 overflow:hidden

3. 给浮动元素的后面添加一个空的div,添加样式为clear:both

原文地址:https://www.cnblogs.com/blankOne/p/9657127.html

时间: 2024-12-12 02:29:13

CSS中浮动的使用的相关文章

CSS 中浮动的使用

float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html x

关于CSS中浮动和定位问题的老生长谈

1 盒子模型 关于盒子模型的知识,想必大家都是非常熟悉的,是个被嚼碎了的话题,盒子概念的理解很简单,但是深入的理解W3C盒子模型和IE的盒子模型是需要费点心思的,特别是对于应用盒子模型做到网页元素的精确排版布局,也是一项重大的挑战. 1.1 W3C的盒子模型 标准的W3C盒子模型的范围包括有margin border padding content,重要的是,这里的content部分不包括border和padding,盒子的height和width是指content部分的宽高. 1.2 IE盒子

关于css中浮动float的最好理解!

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div style="border:3px solid silver; width:300px;"> <div id="container" style=&

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法) 博客正文:   1.css块级元素讲解 常见的块级元素主要有以下几种:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<addr

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

CSS中的浮动、高度塌陷以及清楚浮动

一.CSS浮动 浮动(float)的框可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边缘.浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列,文档中的普通流就表现得如同浮动框不存在一样.当浮动框高度超出包含框的时候,就会出现包含框不会自动升高来闭合浮动元素("高度塌陷"现象). <!DOCTYPE html> <html> <head> <style type="t

css中的浮动

在写程序的过程中经常会遇到这样的问题:希望某一个块或者元素到我指定的区域.这就涉及到定位和浮动的问题,下面我将详细说明css中的浮动. 一.浮动(float)------- 正常文档流中:块级元素从上到下依次排列,内嵌元素从左到右依次排列. 浮动:顾名思义,指元素从正常文档流中脱离出来,按照我们的想法而使元素达到指定的区域位置的功能. 1.浮动的对象:css中我们可以浮动任何元素,包括段落.列表.div.图像等. 2.浮动的功能,浮动是基于css的现代web设计用到的主要功能之一: a.它可以用

辛星彻底帮您解决CSS中的浮动问题

浮动,是CSS布局中必须经过的一道坎,如果不熟悉浮动,那么CSS的布局就如同空中楼阁,而谈到浮动,更多的是和div相结合,div是一个块级元素,这个我前面的博文有介绍,如果大家喜欢我的风格,可以搜索下. 下面我们进入正题,所谓浮动,可以用css的属性float来定义,比如float:left就是向左浮动,float:right就是向右浮动,我们先看一个不浮动的例子把,首先是这个html文件,这个文件我们是一直都不会动它了,它的内容如下: <html> <head> <link