浮动属性

文章目录

浮动属性
- 浮动的作用
- 浮动的副作用（清除浮动）
- - 解决方法一：写固定高度
  - 解决方案二：清除浮动
  - 解决方案三：当前浮动元素后面补一个盒子，不设置宽高，clear：both
  - 解决方案四：overflow：hidden
浮动案例

浮动的作用

浮动的作用1：定义网页中其他文本如何环绕该元素显示
浮动的作用2：就是让竖着的东西横起来

个数	属性	描述	说明
1	float	float : left	元素靠左边浮动
2	float	float : right	元素靠右边浮动
3	float	float : none	元素不浮动
4	clear	clear: none	允许有浮动对象
5	clear	clear: right	不允许右边有浮动对象
6	clear	clear: left	不允许左边有浮动对象
7	clear	clear: both	不允许有浮动对象

浮动的副作用（清除浮动）

清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档的位置。
浮动会引起高度塌陷

解决方法一：写固定高度

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2{width: 200px;height: 200px;float: left;}.box1{background-color: yellow;}.box2{background-color: blue;}.box{width: 300px;height: 300px;background-color: red;} .container{height: 200px;}</style>
</head>
<body><div class="container"><div class="box1"></div><div class="box2"></div></div><div class="box"></div>
</body>
</html>

解决方案二：清除浮动

这个属性要加给后边的兄弟

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2{width: 200px;height: 200px;float: left;}.box1{background-color: yellow;}.box2{background-color: blue;}.box{width: 300px;height: 300px;background-color: red;clear: left;} </style>
</head>
<body><div class="container"><div class="box1"></div><div class="box2"></div></div><div class="box"></div>
</body>
</html>

解决方案三：当前浮动元素后面补一个盒子，不设置宽高，clear：both

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2{width: 200px;height: 200px;float: left;}.box1{background-color: yellow;}.box2{background-color: blue;}.box{width: 300px;height: 300px;background-color: red;} </style>
</head>
<body><div class="container"><div class="box1"></div><div class="box2"></div><div style="clear: left;"></div></div><div class="box"></div>
</body>
</html>

解决方案四：overflow：hidden

bfc 让浮动元素计算高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2{width: 200px;height: 200px;float: left;}.box1{background-color: yellow;}.box2{background-color: blue;}.box{width: 300px;height: 300px;background-color: red;} .container{overflow: hidden;}</style>
</head>
<body><div class="container"><div class="box1"></div><div class="box2"></div></div><div class="box"></div>
</body>
</html>

浮动案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div img{width: 187px;height: 125px;}div p{width: 187px;font-size: 12px;text-align: center;background-color: #f6f7f8;}div{float: left;}</style>
</head>
<body><div><img src="http://contentcms-bj.cdn.bcebos.com/cmspic/34ab42d1d15c245696b013a5360b22bd.jpeg?x-bce-process=image/crop,x_0,y_62,w_950,h_638"/><p>迪丽热巴蓝色挑染发丝 如梦似幻</p></div><div><img src="http://contentcms-bj.cdn.bcebos.com/cmspic/530fda82dc2b62b22a9a895959432371.jpeg?x-bce-process=image/crop,x_0,y_108,w_640,h_430"/><p>唐嫣穿粉色西装气场全开</p></div><div><img src="http://contentcms-bj.cdn.bcebos.com/cmspic/51a4337e1ac7e5ea6d848b8cfac6f53c.jpeg?x-bce-process=image/crop,x_30,y_0,w_693,h_465"/><p>井柏然身着印花毛衣温柔软糯</p></div><div><img src="http://contentcms-bj.cdn.bcebos.com/cmspic/ab163e5d25f3d4cc081670ec4559e56e.jpeg?x-bce-process=image/crop,x_0,y_87,w_640,h_430"/><p>陈都灵大波浪卷发气质温柔</p></div><div><img src="http://contentcms-bj.cdn.bcebos.com/cmspic/7787662453a01320ca80453f0d882457.jpeg?x-bce-process=image/crop,x_0,y_42,w_640,h_430"/><p>baby穿纯白露背长裙高贵典雅</p></div>
</body>
</html>

【前端学习笔记】浮动属性相关推荐

前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
前端学习笔记（this）
前端学习笔记(this) 在函数中调用在函数中直接调用函数作为对象的方法进行调用不在函数中调用 es6的箭头函数在函数中调用在函数中直接调用 1 严格模式和非严格模式中this 严格模式下t ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...
前端学习笔记36-水平方向的布局
前端学习笔记36-水平方向的布局上一节中的margin-right是没用的,为什么呢? 子元素的七个水平布局设置: margin-left border-left padding-left widt ...
Owl 学习笔记之四---属性
Owl 学习笔记之四---属性内容概述

【前端学习笔记】浮动属性

浮动属性

文章目录

浮动的作用

浮动的副作用（清除浮动）

解决方法一：写固定高度

解决方案二：清除浮动

解决方案三：当前浮动元素后面补一个盒子，不设置宽高，clear：both

解决方案四：overflow：hidden

浮动案例

【前端学习笔记】浮动属性相关推荐

最新文章

热门文章