django学习入门系列之第三点《CSS基础样式介绍3》

文章目录

浮动
什么是浮动
- 浮动的特性
- 清除浮动
往期回顾

浮动

什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动的特性

浮动元素会脱离标准流(脱标)
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

特性1：设置了浮动（float）的元素最重要特性：

脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）
浮动的盒子不再保留原先的位置

在这里插入图片描述
特性2：如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

在这里插入图片描述
注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐。

特性3： 浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理
实例：移动

相当于把内容移动到最左/最右边(span)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title>
</head>
<body><span>中国</span><span style="float: right">移动</span>
</body>
</html>

块级标签使用浮动

可能使他”飘“起来，脱离文档流
- 什么是文档流：文档流是指在HTML文档中，元素按照它们在HTML文档中的出现顺序依次从上到下排列，形成一个连续的流
让块级标签不会独占一整行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c2{float: left;color: green;width: 50px;height: 60px;border: 1px solid red;}</style>
</head>
<body><div class="c2">text</div><div class="c2">text</div><div class="c2">text</div><div class="c2">text</div>
</body>
</html>

在这里插入图片描述

清除浮动

为什么要清除浮动
- 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
如果想解决脱离文档流的情况则需要加*style*="clear: both"

<!-- 添加前 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c2{float: left;color: green;width: 50px;height: 60px;border: 1px solid red;}</style>
</head>
<body>
<div style="background-color: blue"><div class="c2">text</div><div class="c2">text</div><div class="c2">text</div><div class="c2">text</div>
</div>
</body>
</html>

在这里插入图片描述

<!-- 添加后 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c2{float: left;color: green;width: 50px;height: 60px;border: 1px solid red;}</style>
</head>
<body>
<div style="background-color: blue"><div class="c2">text</div><div class="c2">text</div><div class="c2">text</div><div class="c2">text</div><div style="clear: both;"></div>
</div>
</body>
</html>

在这里插入图片描述
所以一旦块级标签出现浮动一定要加*style*="clear: both;

浮动带来的好处

父级可以不用设置高度，只用子级设置高度，子级可以撑起父级的高度，以实现代码简化

/*控制父级边框*/
.header{background: #333;}/*控制子级边框*/
.container{width: 1226px;margin: 0 auto;
}/*控制子级边框下的左边菜单栏*/
.header .menu{float: left;}/*控制子级边框下的右边菜单栏*/
.header .account{float: right;color: #b0b0b0;
}/*控制子级边框下的菜单栏中的span标签*/
.header span{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 15px;
}/*效果图如下*/

在这里插入图片描述

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/857880.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！