2019-05-29浮动 文字绕图 内联元素的浮动 简单布局

1.浮动

块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开

如果希望块元素在页面中水平排列,可以使块元素脱离文档流

使用float来使元素浮动,从而脱离文档流

可选值:

none,默认值,元素默认在文档流中排列

left,元素会立即脱离文档流,向页面的左侧浮动

right,元素会立即脱离文档流,向页面的右侧浮动

当为一个元素设置浮动以后(float属性是一个非none的值),元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动

元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素

如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素

2.文字绕图

*{

margin: 0;

padding: 0;

}

.box1{

width: 100px;

height: 100px;

background-color: #bfa;


浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以通过浮动来设置文字环绕图片的效果


float: left;

}

.p1{

/*height: 200px;*/

background-color: yellow;

}

3.内联元素的浮动

.box1{

在文档流中,子元素的宽度默认占父元素的全部

height: 100px;

background-color: #bfa;

当元素设置浮动以后,会完全脱离文档流.

块元素脱离文档流以后,高度和宽度都被内容撑开

float: left;

}

.s1{

开启span的浮动

内联元素脱离文档流以后会变成块元素

float: left;

width: 100px;

height: 100px;

background-color: yellow;

}

4.简单布局

<!DOCTYPE html>

<head>

<title>简单布局</title>

/*清除默认样式*/

*{

margin: 0;

padding: 0;

}

/*设置头部*/

.header{

/*设置宽度*/

width: 1000px;

/*设置高度*/

height: 150px;

/*设置背景颜色*/

background-color: yellowgreen;

/*设置居中*/

margin: 0 auto;

}

/*设置主体内部*/

.content{

/*设置宽度*/

width: 1000px;

/*设置高度*/

height: 400px;

/*设置背景颜色*/

background-color: orange;

/*设置居中*/

margin: 10px auto;

}

/*设置content中小div的样式*/

.left{

width: 200px;

height: 100%;

background-color: skyblue;

/*向左浮动*/

float: left;

}

.center{

width: 580px;

height: 100%;

background-color: yellow;

/*向左浮动*/

float: left;

/*设置水平外边距0*/

margin: 0 10px;

}

.right{

width: 200px;

height: 100%;

background-color: pink;

/*向左浮动*/

float: left;

}

/*设置页脚*/

.footer{

/*设置宽度*/

width: 1000px;

/*设置高度*/

height: 150px;

/*设置背景颜色*/

background-color: silver;

/*设置居中*/

margin: 0 auto;

}

</style>

</head>

<body>

<!-- 头部div -->

</div>

<!-- 主体内容div -->

<!-- 左侧div -->

</div>

<!-- 中间div -->

</div>

<!-- 右侧div -->

</div>

</div>

<!-- 底部信息div -->

</div>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容