[CSS] 浮动 float属性、clear属性详解

一、浮动

1、简单描述

设置了float属性的元素会根据设置的属性值左右浮动，该元素被称为浮动元素。

浮动元素会从普通的文档流中脱离出来，但是浮动元素影响的不仅是自己，还会影响周围的元素对其进行环绕。

2、属性值

float属性值	说明
left	元素向左浮动
right	元素向右浮动
inherit	从父元素继承 float 属性的值
none	默认值，元素不浮动

3、作用

使块元素可以横向排列。

二、清除浮动

1、简单描述

clear 属性指定元素两侧不能出现浮动元素。

清除浮动只能影响使用清除的元素本身，不能影响其他元素。

2、属性值

clear属性值	说明
left	不允许左边有浮动对象
right	不允许右边浮动对象
both	不允许有浮动对象
none	默认值，允许两边都有浮动对象

3、作用

打破块状元素的横向排列

[CSS] 浮动 float属性、clear属性详解相关推荐

用CSS的float和clear创建三栏液态布局的方法(转载）
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
CSS float浮动的深入研究、详解及拓展(二)
为什么80%的码农都做不了架构师?>>> 接上回- 五.浮动的非本职工作浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
CSS浮动(float,clear)通俗讲解- 杨元- 博客园
学习CSS布局主页目录 inline-block 你可以创建很多网格来铺满浏览器.在过去很长的一段时间内使用 float 是一种选择,但是使用 inline-block 会更简单.让我们看下使用这 ...
python属性使用教程_Python对象的属性访问过程详解
只想回答一个问题: 当编译器要读取obj.field时, 发生了什么? 看似简单的属性访问, 其过程还蛮曲折的. 总共有以下几个step: 1. 如果obj 本身(一个instance )有这个属性, ...
CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
python控制画笔尺寸,Python画笔的属性及用法详解
画笔有颜色.画线的宽度等属性. 1.turtle.pensize():设置画笔的宽度: 2.turtle.pencolor():没有参数传入返回当前画笔颜色:传入参数设置画笔颜色,可以是字符串如&qu ...

[CSS] 浮动 float属性、clear属性详解

一、浮动

1、简单描述

2、属性值

3、作用

二、清除浮动

1、简单描述

2、属性值

3、作用

[CSS] 浮动 float属性、clear属性详解相关推荐

最新文章

热门文章