浮动

时间 2021-08-14

标签 html ide htm 文档 class meta float 移动栏目 HTML 繁體版

原文原文链接

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.box1{

width: 400px;

height: 200px;

background-color: #bfa;

/*

使用float来设置元素的浮动，

浮动能够使元素向左或向右移动

可选值：

none 默认值，不浮动

left 向左浮动

right 向右浮动

浮动的特色:

1.设置浮动之后，元素会向页面的左侧或右侧移动

2.设置浮动之后，元素会彻底脱离文档流，不在占据文档流中的位置，因此它下边的元素会自动上移

3.浮动元素不会超过其上没有浮动的块元素

4.浮动元素的默认位置不会超过其上的其余的浮动元素，最多一边齐

元素脱离文档流之后的特色：

1.默认宽度被内容撑开

2.默认高度被内容撑开

3.块元素不会独占一行。

4.元素不会在文档流中再占据位置。

行内元素浮动之后也会脱离文档流，

脱离文档流之后行内元素自动变成块元素，特色和块元素同样

*/

/* float: right;*/

float: left;

}

.box2{

width: 400px;

height: 200px;

background-color: yellow;

float: left;

}

.box3{

width: 200px;

height: 200px;

background-color: orange;

float: right;

}

a{

width: 200px;

height: 200px;

background-color: yellow;

float: left;

}

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

相关文章

相关标签/搜索

CSS浮动---浮动篇

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<