简单理解float浮动

简介: 简单理解float浮动

原本意义:实现文字环绕效果


BFC Block formatting context

块级格式化上下文


具有包裹性属性

display:inline-block/table-cell

position:absolute/fixed/sticky

verflow:hidden/scroll


破坏

容器被破坏, 父元素高度塌陷


display:none

position:absolute/fixed/sticky


清除浮动

html元素底部: clear:both

css伪元素底部:.clearfix:after{}


应用于包含浮动子元素的父级元素上

/* IE8 */
.clearfix:after{
    content:"";
    display:block;
    height:0;
    overflow:hidden;
    clear:both;
}

/* IE6, IE7 */
.clearfix{
    *zoom:1;
}

浮动

1、元素block块状化(砖头化)

2、破坏性造成的紧密排列特性(去空格化)

            </div>
目录
相关文章
|
5月前
|
前端开发 容器
CSS基础-浮动:float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性,用于创建多列布局和图文混排,但会导致浮动塌陷和元素重叠问题。为解决这些问题,文章探讨了`clear`属性的四种清除浮动方法,包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起,它们在某些场景下替代了浮动,但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
63 5
|
2月前
元素的浮动属性float
元素的浮动属性float。
15 6
|
6月前
|
前端开发
CSS float(浮动)
CSS float(浮动)
59 2
时隔多年,从新认识浮动float
时隔多年,从新认识浮动float
|
前端开发
CSS布局讲解-float浮动布局使用
CSS布局讲解-float浮动布局使用
|
前端开发
css--float浮动
css--float浮动
|
前端开发 容器
简单理解float浮动
简单理解float浮动
72 0
|
前端开发 容器
CSS之我是一个浮动元素(float)
大家好,我是一个浮动元素,我在CSS王国中是一个很重要的角色,也许你们现在在工作中很少见到我的身影,因为我的flex兄弟和position定位兄弟在大部分情况下可以取代我,但是我还是想详细的介绍一下我自己,毕竟我曾经也是一个在前端开发中随处可见的明星人物。
148 0
CSS之我是一个浮动元素(float)
|
程序员
好程序员分享居中一个float元素
  好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果。对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin:0 auto;就行了,这种技巧甚至在IE6中兼容得很好。
1179 0
|
Web App开发 JavaScript 前端开发
浮动的label
图片来自JVFloatLabeledTextField 在web项目中,有一个很重的模块就是登陆/注册模块,这个模块的主体部分就是一个form表单,这个form表单包含两个重要input组(用户名/密码),每个input组都包含label和input,而关于 label+input 的布局方案多种多样,不同的设计师有不同的设计风格,不同的前端工程师又有不同的实现方式。
1251 0