【零基础入门】 css学习笔记（5）浮动

clasnake 发布于2019-08-30 15:53 / 1299人阅读

摘要：浮动元素性质，浮动的元素脱离标准流这个元素像从标准流中被删除一样。下图是左浮动时的显示效果。，浮动的元素会互相贴靠如果父元素的宽度能显示所有浮动元素，则浮动的元素会并排显示。，无论是块级元素行内元素，一旦浮动了，都可以设置宽高，不需要用。

浮动 1.1、语法：

float: left; 左浮动，元素往最左边靠；
float: right; 右浮动，元素往最右边靠

1.2、floa属性：

1，尽可能远地向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框为止。然后它
们下面的所有内容会绕流这个元素（即像流体一样绕着这个元素流动）。

2，当一个元素浮动后，不会影响块级元素的布局，只会影响内联元素（通常是文本或图片）的布局。
**内联内容（包括文本）总会围绕着浮动元素，会留意浮动元素的边界；
块元素则会忽略浮动元素，正常流向页面。

1.3、浮动元素性质：

1，浮动的元素脱离标准流：这个元素像从标准流中被删除一样。
1）下图是两个div正常标准流下的显示效果。

2）下图是div1左浮动时的显示效果。

为什么显示效果是这样：
1）浏览器摆放上述浮动元素 div1时，把它尽可能放在最左边。
2）浏览器会从流中删除这个div1，就好像它浮在页面上一样。
3）由于div1已经从正常流中删除，所以标准流元素div2会往上移，填在该元素位置上。

2，浮动的元素有“字围”效果
浮动元素不会挡住没有浮动元素中的文字和图片即浮动元素下面的所有内容会绕流这个元素（即像流体一样绕着这个元素流动）。

3，浮动的元素会互相贴靠
a）如果父元素的宽度能显示所有浮动元素，则浮动的元素会并排显示。
b）如果父元素的宽度不能显示所有浮动元素，就会从最后一个开始往前贴靠。
c）如果贴靠了前面所有浮动元素后都不能显示，最终会贴到父元素的左边或右边。
案例：如下图中，父元素是body；
如果浏览器宽度足够，则div3会靠着div2；如表格图3
若靠着div2放不下，则div3会去靠div1；如表格图2
若靠div1也放不下，则自己去贴左墙；如表格图1

4，浮动的元素如果不设置宽，高，就会收缩为文字所占的大小。
例：div1设置了浮动，但没设置宽、高，自动缩紧为内容的宽度。

强调：
1，宏观的看，浮动就是做“并排”的。
2，无论是块级元素/行内元素，一旦浮动了，都可以设置宽高，不需要用display: block。因为浮动之后，脱离标准流了，所以标准流里面的规则都不适用了。
3，浮动流中不能用margin:0 auto；也没有居中对齐。

1.4 应用案例

1，水平导航栏
导航栏是链接列表，因此用

是非常合适的
html代码如下：

分析：
1）导航栏不需要列表项的标记，因此要把圆点去掉；
2）还可把浏览器默认设定的外边距和内边距设为0；
3）水平方向摆放，对li进行浮动；
4）一般每个链接的宽度是一样的，而且整个链接域都可点击（不仅仅是文本），因此要对a进行设置

5）接着进行美化设置

云服务器 GPU云服务器零基础入门学习零基础入门深度学习零基础入门学习python 基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116754.html

【零基础入门】css学习笔记（6）清除浮动

摘要：清除浮动，为何要清除浮动浮动效果会带来不好的影响子元素浮动会带来父元素高度塌陷。，清除浮动的两大基本方式，运用清除浮动。元素流入页面时，在这个元素左边右边或两边不允许有浮动内容。除了是用来清除浮动的，其它代码都是为了隐藏掉生成的内容。清除浮动 1，为何要清除浮动浮动效果会带来不好的影响：子元素浮动会带来父元素高度塌陷。具体解释：当浮动框高度超出包含框时，包含框不会自动伸高来闭...

BingqiChen 2019-08-30 15:53 评论0 收藏0
【零基础入门】 css学习笔记（4）布局与定位介绍

摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。写在前面：作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点...

nevermind 2019-08-30 15:53 评论0 收藏0
【零基础入门】 css学习笔记（3）选择器与层叠性

摘要：，高级选择器后代选择器空格表示后代选择器就是的后代所有的。注意是后代，并不一定是儿子空格可以出现多次补充后代选择器中出现的东西很灵活，可以是标签，可以是名，可以是名后代选择器，就是一种平衡共性特性的平衡。一，选择器 1，基础选择器 1）标签选择器：div{ } ，选择的所有，而不是一个，用来描述共性。 2）类选择器：.class名{ } 多个元素可以同时属...

cppprimer 2019-08-29 15:43 评论0 收藏0
【零基础入门】 css学习笔记（2）盒模型

摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。盒模型 1，盒模型： CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。 2，五个属性：从内往外： width:内容的宽度，而不是盒子的宽度； hei...

mrcode 2019-08-30 15:53 评论0 收藏0
【零基础入门】 css学习笔记（1）字体颜色样式等

摘要：在元素中使用元素是一个元素，没有结束标记表示链入的是样式表，在中可省略不写。一般页面中，中文用宋体黑体微软雅黑，英文使用。英文字体要放在最前面，中文字体后面的备选字体用逗号隔开。表示方法可用像素指定或使用或百分数相对于字体大小指定。一、基础介绍 1， css：cascading style sheet 层叠式样式表2，语法：p {background-color:red...

fai1017 2019-08-30 15:53 评论0 收藏0