float浮动

文档流

文档流是文档中可显示对象在排列时所占用的位置。

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值

left
right
none（默认）
实践

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS浮动</title><style>body{border: 1px black solid;}#box1{width: 100px;height: 100px;background: yellow;float: left;}#box2{width: 200px;height: 200px;background: red;float: right;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div>
</body>
</html>

效果图

float注意点

只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。
实践

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS浮动注意点</title><style>body {border: 1px black solid;}ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}li{width: 100px;height: 100px;background: red;border: 1px salmon solid;box-sizing: border-box;float: left;}li:nth-of-type(1){height: 120px;}li:nth-of-type(2){height: 80px;}span:last-of-type{float: right;}
/*#box1 {width: 100px;height: 100px;background: yellow;}#box2 {width: 200px;height: 200px;background: #ff90f6;float: left;}#box3 {width: 300px;height: 300px;background: #83ff86;}#box4 {background: #a4c3ff;float: left;}*/</style>
</head>
<body><!-- <div id="box1"></div><div id="box2"></div><div id="box3">MWMWMWMMWMWMWMWMMWMWMMWMWMWMWMMWMWMWMWMMWMWMMWMWMWMWMMWMWMWMWMMWMWMMWMWMWMWMMWMWMWMWMMWMWMMW</div><div id="box4">这是一个没有宽度的块级元素</div>--><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><span>aaaa</span><span>bbbb</span>
</body>
</html>

效果图

CSS(十三)float浮动相关推荐

CSS样式 float浮动用法
CSS样式 float浮动用法前言 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标 ...
CSS之float浮动布局
css之float浮动布局浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 1. 浮 ...
CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称在css表的 ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
CSS布局之float浮动
之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料 ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

CSS(十三)float浮动

float浮动

文档流

float特性

float取值

float注意点

CSS(十三)float浮动相关推荐

最新文章

热门文章