CSS浮动定位(float)

CSS浮动定位

在CSS中设置一个盒子的float值为left或者right,就会使得盒子浮动起来。

浮动盒子的特点:
  • 浮动盒子向左或者右移动,直到碰到包含块的边界(content)或者另一个浮动盒的外边界(margin)

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Documenttitle>
		<style>
			.outer-box{
				width: 500px;
				height: 500px;
				background-color: pink;
			}
			.float{
				width: 200px;
				height: 200px;
				float: left;
			}
			.float1{
				background-color: red;
			}
			.float2{
				background-color: green;
			}
		style>
	head>
	<body>
		<div class="outer-box">
			<div class="float float1">div>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus beatae, mollitia dolore, dignissimos neque eius repudiandae maiores perspiciatis saepe ea quae officiis minima, laborum debitis iste nisi placeat? Eaque, molestias!
			<div class="float float2">div>
		div>
	body>
html>

效果:
CSS浮动定位(float)_第1张图片

  • 如果存在行框,浮动盒的上外边界(margin)和当前行框的上边界对齐
  • 如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者再没出现其它浮动

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Documenttitle>
		<style>
			.p {
				width: 10em;
				border: solid aqua;
			}
			span{
				float: left;
				width: 5em;
				height: 5em;
				border: solid blue;
			}
		style>
	head>
	<body>
		<p class="p">
			Supercalifragilisticexpialidocious
            <span>span>
		p>
	body>
html>

效果:
CSS浮动定位(float)_第2张图片
这里的英文形成的行框没有被压缩,因为其内部的行内盒无法拆分(因为英文单词换行的规则),所以这行文本出现在浮动元素的右侧(文本环绕效果),而是被挤到了浮动元素的下方。
如果这里的英文换成中文就可以
CSS浮动定位(float)_第3张图片

  • 一个行框紧挨着浮动元素(会缩短)的条件是行框有一部分在垂直方向上浮动盒的上外边距边界和下外边距边界直接。(也就是说0外高度(outer height)或者负外高度(盒)的浮动不会缩短行框)
  • 如果一个行内级盒放置在将要浮动的盒子的左边,那么当浮动盒浮动时,行内级盒会被移动到浮动盒的右边。

你可能感兴趣的:(css)