CSS学习10[重点]--浮动、浮动的效果以及内幕特性

2024/12/27 9:36:30 来源：https://blog.csdn.net/qq_54641174/article/details/141830008 浏览: 次关键词：CSS学习10[重点]--浮动、浮动的效果以及内幕特性

CSS布局——浮动

前言
一、普通流
二、浮动
三、什么是浮动?
四、浮动的内幕特性
总结

前言

CSS盒子布具的三种机制：普通流（标准流）、定位、浮动。

一、普通流

普通流：网页内元素自上而下，从左到右排序。

二、浮动

浮动最开始的时候浮动是做文字环绕效果

<html>
<head><style>div {width: 200px;height: 100px;margin: 0 auto;}img {float: right;}</style>
</head>
<body><div>123899hj9d<img src="#.png" width="12" height="10" alt=""></div>
</body>
</html>

后来发现可以用浮动布局盒子

三、什么是浮动?

普通流改到浮动

<html>
<head><style>div {width: 200px;height: 100px;background-color: pink;display: inline-block; /*转换为行内块元素，放到一行但是元素中间有空格*/float: left; /*左侧浮动 一行排列没有空隙*/}div:nth-child(2) {background-color: hotpink;}div:last-child {background-color: deeppink;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

实现块级元素放在一行。用display转换为行内块元素，但是此时div之间的空格难以去掉。用float: left; 可以放在一行且没有空格。
元素的浮动指定了浮动属性的元素脱离标准流，移动到父元素中指定位置的过程。在CSS中用float属性来定义浮动，其基本语法格式：

float: left;
float: right;
float: none;

具体来说，浮动体现在脱离标准流，压在标准流上面。

<html>
<head><style>div:first-child {width: 200px;height: 100px;background-color: pink;float: left; /*加入这行，第一个盒子浮动到最上面，第二个盒子在底层从左上开始*/}div:last-child {width: 200px;height: 700px;background-color: blue;}/*如果两个盒子不加浮动，都是标准流，块级元素自上而下显示*/</style>
</head>
<body><div></div><div></div>
</body>
</html>

四、浮动的内幕特性

浮动脱离标准流，不占位置，压在标准流上面。浮动只有左右浮动。

使用的时候需要首先创造包含块的概念，即浮动的元素找它最近的父级元素对齐，但不超出内边距。

<html>
<head><style>.father {width: 200px;height: 100px;background-color: pink;border: 10px solid purple;padding: 10px;}.son {width: 100px;height: 50px;background-color: blue;float: left; }</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

浮动元素的排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

<html>
<head><style>section {width: 500px;height: 500px;background-color: pink;padding: 10px;}section div:first-child {width: 100px;height: 50px;background-color: blue;float: left; }section div:last-child {width: 100px;height: 50px;background-color: purple;float: left; }</style>
</head>
<body>
<section><div>1</div><div>2</div>
</section>
</body>
</html>

一个父盒子里面的子盒子，如果有一个子级有浮动，则其他子级都需要浮动。这样才能一行对齐显示。

元素添加浮动之后，具有行内块特性。元素的大小取决于定义的大小或者默认的内容大小。

<html>
<head><style>div {width: 500px;height: 500px;background-color: pink;float: left;  /*块级元素浮动之后 具有行内块特性*/}span {height: 100px;background-color: hotpink;float: left;  /*行内元素浮动之后 具有行内块特性*/}/*行内块特性 可以一行放多个 具有宽度和高度 盒子的大小由内容决定*/</style>
</head>
<body>
<section><div>1</div><div>2</div><span>123</span><span>123</span>
</section>
</body>
</html>