re:从0开始的CSS之旅 15. 浮动

1. 浮动

浮动:使元素浮起来,脱离文档流,从而使盒子能够灵活的移动。

浮动的属性:
float 属性设置元素的浮动
可选值:
none 元素不浮动,默认在文档流中排列(默认值)
left 元素向左移动
right 元素向右移动

浮动的特点:

  1. 浮动元素会脱离文档流

    1. 脱离文档流的控制,从而使盒子更灵活的移动
    2. 浮动元素不会保留原来的位置
  2. 浮动元素将具有行内块元素的特点

    1. 无论是块元素还是行内元素,都可以设置浮动,浮动后将具有行内块元素的特点
    2. 块元素设置浮动后,大小根据内容决定
    3. 行内元素设置浮动,不需要通过display转换为块,就可以设置宽度和高度
  3. 浮动的盒子会一行显示并且顶部对齐

    1. 多个盒子设置了浮动,他们会一行显示并且顶部对齐
    2. 浮动元素互相贴靠在一起,没有缝隙,如果父元素宽度不能容纳这些盒子
      多出的盒子会另起一行对齐显示

浮动的应用:
1. 浮动元素目的就是为了让盒子横向(水平)排列,完成水平方向的布局
2. 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围

浮动的注意:
1. 浮动元素无法超越文档流的块元素
2. 浮动元素只会影响后面文档流中的元素,不会影响前面文档流的盒子

示例如下:

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>floatingtitle>
	
	div {
		width: 200px;
		height: 200px;
	}
	
	.box1 {
		background-color: #c7edcc;
	}
	
	.box2 {
		background-color: #fde6e0;
	
		float: left;
	}
	
	.box3 {
		background-color: #dce2f1;
	
		float: left;
	}
	
	span {
		background-color: yellowgreen;
		width: 100px;
		height: 100px;
		float: left;
	}
head>

<body>
	<div class="box1">div>
	<div class="box2">我是divdiv>
	<div class="box3">div>

	<span>我是span1span>
	<span>我是span2span>
	<span>我是span3span>
	<span>我是span4span>
body>

html>

你可能感兴趣的:(从0开始的CSS之旅,css,前端,css3)