- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端进阶之路
CSS3 - 清除浮动
二、 内容简介 1、 引入，还原浮动本来的意义 2、 说明，实际开发中常用浮动来做什么 3、 提问，为什么要清除浮动 4、 回答，如何清除浮动以及常用的几种方法 5、 结论，得出本文认为最好用的方法 三 border-right: 1px solid #a0a2a2; } .section2 li a { color: #fff; } 3、 为什么要清除浮动 通过上图可以看到，当三个板块左浮动以后 因为它们脱离了正常文档流，所以它们的父元素ul在不设置高度的情况下，无法被子元素撑开(能够看到背景色是因为我设置了ul的padding为10px)，所以当你在后边新增元素的时候，自然会排在ul后边，也就是插入到了3个浮动的板块下面 20px; background-color: #b7db05; } ul li { width: 200px; height: 200px; background-color: #e3e3e3 (3) 采用伪类方法，在最后一个浮动元素的后边，添加clear:both。
51510编辑于 2024-02-01 - 来自专栏前端进阶之路
CSS3 - 清除浮动
---- 二、 内容简介 1、 引入，还原浮动本来的意义 2、 说明，实际开发中常用浮动来做什么 3、 提问，为什么要清除浮动 4、 回答，如何清除浮动以及常用的几种方法 5、 结论，得出本文认为最好用的方法 border-right: 1px solid #a0a2a2; } .section2 li a { color: #fff; } 复制代码 3、 为什么要清除浮动 ? ，自然会排在ul后边，也就是插入到了3个浮动的板块下面。 20px; background-color: #b7db05; } ul li { width: 200px; height: 200px; background-color: #e3e3e3 (3) 采用伪类方法，在最后一个浮动元素的后边，添加clear:both。
1K20发布于 2018-10-31 - 来自专栏韩曙亮的移动开发专栏
【CSS】浮动 ② ( 浮动语法简介 | 文字环绕效果 | 左浮动 | 右浮动 )
文章目录 一、浮动语法简介 1、语法说明 2、没有浮动的效果 3、左浮动的效果 4、右浮动的效果 5、右浮动 + 外边距效果 二、完整代码示例 一、浮动语法简介 ---- 1、语法说明 为 元素 设置了 浮动语法 : 选择器 { float: 浮动属性值; } 浮动属性值 取值 : none : 默认设置 , 元素没有浮动效果 ; left : 元素 左浮动 ; right : 元素 右浮动 ; 2、 没有浮动的效果 浮动效果需要结合文字来进行对比 , 浮动可以实现 使用文字环绕图片 的效果 ; 设置没有浮动效果 : /* 默认无浮动效果 */ float: none; 展示效果 : 图片是 行内块元素 , 与文字地位相同 , 无法实现文字环绕图片效果 ; 3、左浮动的效果 左浮动效果 , 可以让图片浮动在左上角 , 文字环绕在图片周围 ; 设置左浮动效果 : /* 左浮动效果 */ float: right; /* 设置图片外边距 */ margin: 10px; } </style> </head> <body>
<img src="images/image<em>3</em>.5K60编辑于 2023-03-25来自专栏河湾欢儿的专栏浮动与清除浮动
浮动 float半脱离文档流（对元素，脱离文档流；对内容，在文档流） 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 float:left | right | none | inherit; 浮动的特征： 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级 清除浮动： 1.加高 问题：扩展性不好 2.父级浮动 问题：页面中所有元素都加浮动，margin左右自动失效 3.inline-block 清浮动方法： 问题：margin左右auto失效； 4.空标签清浮动 问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差） 5.br清浮动 问题：不符合工作中：结构、样式、行为，三者分离的要求。 ； 8.position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法； position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
3.1K10发布于 2018-09-06来自专栏田小檬博客CSS3 实现卡片浮动效果
实例 查看实例 实现原理 给卡片添加 css3 新的过度属性（transition），鼠标移入和移出时都会触发这个过度属性，使卡片向上偏移一段距离，同时扩大卡片的背景阴影，从而实现卡片的浮动效果。
65150编辑于 2023-08-24来自专栏高级工程司CSS3 实现图片上浮动画
.gist { width:220px; height:130px; background-image: url(2.jpg); background-repeat:no-repeat; border:5px solid green; background-position:50% 50%; transition:background-position 2s; -moz-transition:background-position 2s; /
1K30发布于 2021-11-02来自专栏十月梦想浮动
3.相对定位 4.绝对定位 5.固定定位 3.浮动定位(俯视) 1.什么是浮动定位或者特点 1.会将元素排除在文档流之外 (脱离文档流) 2.元素不再占据页面空间 3.其他元素要向前补位 4.浮动元素会停靠在父元素的左边或者右边 或者 停靠在已经浮动的元素的边缘上 2.处理的处理（作用） 1.让块元素在一行显示 3.属性 :100px; background-color:green; } #d3{ background-color:purple; width:200px; height:100px; } 将红色背景的 ， 那么最后一个将会换行 2.浮动元素如果不设置宽的话， 那么元素的宽度将会自适应 3.所有浮动起来的元素都会变成块元素
2.8K20发布于 2018-08-29</body> </html> 展示效果 : 3、 */ .son3 { clear: both; } </style> </head> <body>来自专栏韩曙亮的移动开发专栏【CSS】清除浮动 ① ( 清除浮动简介 | 清除浮动语法 | 清除浮动 - 额外标签法 )
文章目录 一、清除浮动简介 二、清除浮动语法 三、清除浮动 - 额外标签法 1、额外标签法 - 语法说明 2、问题代码示例 3、额外标签法代码示例 一、清除浮动简介 ---- 在开发页面时 , 遇到下面的情况 " 清除浮动 " 操作 ; 清除浮动 主要作用 : 解决 父容器盒子模型 因为 子元素 被设置为 浮动元素 导致 高度默认为 0 像素 的问题 ; 清除浮动 效果 : 父容器 检测高度时 , 会考虑 浮动子元素 son1">
</7.4K40编辑于 2023-03-30
CSS3 圆角边框 阴影 浮动详解
CSS3 圆角边框、阴影、浮动详解 ---- 圆角边框： 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用 盒子阴影： CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 浮动最典型的应用：可以让多个块级元素一行内排列显示。 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 1.4什么是浮动？ 1.5 浮动特性（重难点） 加了浮动之后的元素,会具有很多特性,需要我们掌握的。 浮动元素会脱离标准流(脱标)。 浮动的元素会具有行内块元素的特性. 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。
【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )
文章目录 一、清除浮动 - 使用双伪元素清除浮动 二、代码示例 一、清除浮动 - 使用双伪元素清除浮动 ---- 为 .clearfix:before 和 .clearfix:after 并集选择器 , 设置如下样式 : /* 清除浮动 - 使用双伪元素清除浮动 */ .clearfix:before, .clearfix:after { content: ""; display : .clearfix { *zoom: 1; } 声明完上述元素后 , 在需要清除浮动元素的 父容器 中 , 声明 clearfix 类 ;
Web - CSS3浮动定位与背景样式
概述这篇文章主要介绍了 CSS3 中的浮动定位、背景样式、变形效果等内容。 包括 BFC 规范与创建方法、浮动的功能与使用要点、定位的多种方式及特点、边框与圆角的设置、背景的颜色、图片等属性、多种变形效果及 3D 旋转等，还提到了浏览器私有前缀。 : hidden浏览器差异IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性，让盒子拥有layout浮动浮动的最本质功能，用来实现并排。 浮动的使用要点：1、要浮动，并排的盒子都要设置浮动。2、父盒子要有足够的宽度，否则子盒子会掉下去。3、子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。 使用浮动布局网页注意事项：1、垂直显示的盒子不需要浮动，不要设置浮动，只有并排显示的盒子才需要浮动！2、大盒子带着小盒子跑，一个大盒子中，又是一个小天地，内部可以继续使用浮动。
CSS浮动
浮动 布局的三种基本方式： 标准流 按照标签默认的特性摆放盒子即为标准流 浮动流 利用浮动摆放盒子即为浮动流 定位流 利用定位摆放盒子即为定位流 浮动最开始是做图文绕排的。 <!
浮动、定位
display:inline 注意： 1. disply:inline-block 行内块元素 2. position:absolute|fixed 会将元素变为行内块 使用盒模型 创建浮动盒 可以使用float属性创建浮动盒（脱离文本流），浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。 值 说明 left 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界 right 移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的右边界 none 元素位置固定 注意事项 ： 同级的一个元素浮动其他的元素也要浮动 浮动脱离文本流，父元素的宽、高不会被撑开 子元素浮动父元素一定要清除浮动 浮动的行内元素可以设置宽、高 示例：父元素不设置高、宽
CSS浮动
网页布局第一准则：竖向排列用标准流，横向排列用浮动 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一浮动框的边缘 语法 选择器{float：属性值;} 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动 浮动特性 重要： 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标 浮动的盒子不再保留原先的位置 如果多个盒子设置了浮动 ，浮动元素在一行内显示并且顶端对齐排列 如果装不下，则会在下一行显示 浮动元素具有行内块元素的特性 如果块级盒子没有设置宽度，默认宽度和父亲一样宽，但是添加浮动后，它的大小由内容来决定 浮动元素经常搭配标准流的父元素 **发现了bug，原来是没有清除内外边距导致的 网页布局第二准则：先设置盒子的大小，之后设置盒子的位置 注意点： 浮动和标准流的父盒子搭配 一个元素浮动了，理论上其余的兄弟元素也要浮动 浮动的盒子只会影响浮动盒子后面的标准流 语法 选择器{clear：属性值;} 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右浮动的影响 额外标签法
CSS入门12-浮动与清除浮动
2.1-3 可以看到，div3不是红色，而且检查div3的元素时发现其真实位置竟然在被div2覆盖的地方。那么如果将div2向右浮动呢？ <! 2.1-4 可以看得更明显，div2其实是脱离标准文档流以后覆盖了div3。 2.2 宽高对浮动的影响 <! 2.4 如图所示，浮动的元素并不会撑起其父元素的高度。这是怎么回事呢？我们会在BFC中进行解释。 3. 参考 W3cSchool CSS浮动float详解 CSS清浮动处理（Clear与BFC） CSS中的浮动和清除浮动，梳理一下！ CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 CSS复习笔记二：浮动和清除浮动 彻底理解浮动float CSS浮动详解 清除浮动的方法 经验分享：CSS浮动(float,clear)通俗讲解
第3天：CSS浮动、定位、表格、表单总结
今天学的是浮动、定位、表格、表单等内容，这些是CSS中最容易混淆的知识，有许多小技巧在写代码过程中需要注意。 下面是主要知识点：
一、float浮动
1、块元素在一行显示
2、内联元素支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
二、clear清除浮动
1、加高（扩展性不好）
给浮动元素的父级设置同样的高度 2、给父级加浮动（页面中所有元素都要加浮动，margin左右失效）
3、inline-block(margin左右auto失效）
4、空标签加浮动（div ）（任何用到的地方都要加）
.clearfix {clear:both;}（IE6最小高度19px,解决后还有2px偏差）
5、.br清浮动（不符合工作中结构、样式、行为，三者分离的要求）
6、after清浮动（现在主流方法 7、overflow:hidden;清除浮动(给浮动元素父级加）
需要配合宽度、zoom兼容IE6、IE7
scroll(滚动条）
overflow:hidden/scroll/auto
三、浏览器
BFC
浮动之后的那些事儿 - 清浮动操作
本文内容概要： 1 上周作业讲解 2 浮动之后的特性 3 如何清浮动 4 实例操作 上周我们讲解了如何去实现页面的简单布局，用了三种基本的CSS选择器来控制标签的样式，同时通过盒模型为每个标签设置了大小与位置 github.com/iceswan/htmlDemo/tree/master/homework/%E6%B5%AE%E5%8A%A8%E4%BD%9C%E4%B8%9A%E8%AE%B2%E8%A7%A3% 3 父元素设置overflow：hidden/auto 给父级div设置overflow，书写hidden或者auto属性值即可用于清浮动操作，代码如下： <style> .main { 3) Unicode: 字符里有一个“零宽度空格”，也就是U+200B，这个字符本身是不可见的。 4) zoom: 1; 由于IE6-7不支持:after，使用zoom:1触发hasLayout。 "sbox2">
浮动(float)
CSS的定位机制有3种：普通流（标准流）、浮动和定位。 html语言当中另外一个相当重要的概念----------标准流！或者普通流。 后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。 ? 什么是浮动？ 在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 浮动详细内幕特性 浮动只有左右浮动。 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 ? 浮动的元素排列位置，跟上一个元素（块级）有关系。 元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。 总结： 浮动 ---> 浮动的目的就是为了让多个块级元素同一行上显示。
关于浮动
浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。 2、清除浮动指什么? 如何清除浮动? 两种以上方法 清除浮动指：消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。 3、 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？ 三种定位方式： relative 相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。 scroll ） display (table-cell，table-caption，inline-block, flex, inline-flex) position值为（absolute，fixed） 3、 BFC有什么作用： 1、解决margin重叠问题； 2、用于布局； 3、用于清除内部浮动，计算BFC高度。
CSS 浮动布局，解决清除浮动的问题
浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素如果没有设置尺寸 (一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动 7、浮动元素之间没有垂直margin的合并 理解练习 1、两端对齐浮动 float:left 和 float:right #">招贤纳才
