为什么浮动老是浮动不好

2024-08-31

浮动float、浮动影响和清除浮动

普通流(normal flow) 这个单词很多人翻译为文档流 , 字面翻译普通流或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS的定位机制有3种:普通流(标准流).浮动和定位. html语言当中另外一个相当重要的概念----------标准流!或者普通流.普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列:按照这种大前提的布局排列之下绝对不会出现例外的

【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3&

Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

一. 什么是标准文档流文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文本流脱离出来显示. 标准文档流的围观现象有3种: 1.空白折叠现象:多个空格或者换行会被折叠成一个. 2.高矮不齐,底边对齐. 3.自动换行,一行写不完,自动换行. <!DOCTYPE html> <html lang="en"> <head

浮动清楚浮动及position的用法

float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 三种取值 left:向左浮动 right:向右浮动 none:默认值,不浮动参考示例 clear clear属性规定元素的哪一侧不允许其他浮动元素. 值描述 left 在左侧不允许浮动元素. right 在右

float浮动-清浮动BFC渲染机制

float浮动,用于横向布局. 起初的横向布局都用display:inline-block,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格:font-size:0;,但影响很大. float浮动会破坏line-box,即浮动元素脱离文档流(当给一个元素设置浮动了之后,它不会再占用页面当中的“位置”了),造成的影响:不会撑开父级的高度.如下图: 想要解决这个影响,就得清浮动(清除浮动所造成的影响)了. 清浮动后,如下: 清浮动的方法: 1.给浮动元素的父级

css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div> 分析CSS代码样

[css]浮动-清除浮动的3种方法

清除浮动的方法: 内墙法注: 这是个奇淫技巧,没什么原理可言,记住即可这个技巧又使得父box重新可以被子box撑开高度了. 隔墙法-适用于2个box之间上下排列由于2个box高度依旧是0, 彼此之间的margin还是不生效. 可以用墙来撑开 .cl { clear: both; } .h16 { height: 16px; } <div class="box1"> <ul> <li>HTML</li> <li>CSS&l

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.脱离文档流 5.提升层级半层文本流 float:left | right | none | inherit; 文档流是文档

第3天：CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

css浮动Float

核心:浮动元素会脱离文档流并向左/向右移动,直到碰到父元素或者另外一个浮动元素. float :left 向左浮动 right 向右浮动 none (默认) inherit 继承父元素 float效果原效果图换张图.....因为我突然发现一个问题,用这张图不好解释........ 原图代码 #container{ width: 1000px; background-color: #48D1CC; margin: auto; padding: 40px; } .box1{ widt

前端笔记之CSS（下）浮动&BFC&定位&Hack

一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/height+padding+border+margin) 块元素行内元素浮动流:产生?影响?如何解决? 定位流:静态定位(不定位) 相对定位绝对定位固定定位 JavaScript(JS): ECMAScript:语法 DOM: BOM: 1.2 浮动产生的背景? 背景:浮动产生的初衷是为了解决

浮动、清除浮动、BFC

一. 浮动 1. 浮动的定义使元素脱离文档流,按照向左或向右的方向移动,直到它的外边缘碰到包含它的框或另一个浮动框为止. 脱离文档流就是在页面中不占位置了. 左浮动右浮动此处就不再赘述了. 2. 看一下浮动的一些情况 (1). 只给第二个p浮动时,3不见了,他其实在2的下面,我给3一个宽一点的宽度.会发现3在2的下面. (2). 给3一个浮动他会没有什么变化,因为浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的 (3). 把外边框的div宽度变小,会导致无法容纳所有的浮动元素,

css那些事儿3 列表与浮动

一列表列表默认为行内块元素,具有宽高,当一个非块元素是无法应用宽高的,比如a 1 有序列表有ol li组成,其中li为列表项,列表的ol子元素务必为li元素标签,li子内容支持列表任意嵌套,有序列表常常会显示1,2,3按照升序或者降序方式的序号,该序号通过list-style-type指定 2 无需列表与有序列表差异在于有无顺序上,至于显示样式上则通过css进行相应设置 3 自定义列表 dl,dt,dd,dt常常代表一个列表项的标题,而dd代表该标题对应的详情的意思 4 列表常用语下拉

转载 | float 清除浮动的7种方法

什么叫浮动:浮动会使当前标签脱离文档流,产生上浮的效果,同时还会影响周边元素(前后标签)及父级元素的位置和width,height属性.下面用一个小例子来看一看浮动的全过程:1.首先我们新建一个网页,在网页中用div元素创建三个小的正方形,为了区别分别给他们不同的ID值和背景颜色,代码如下 1 <style> 2 div{ 3 width:100px; 4 height:100px; 5 } 6 #green{ 7 background:green; 8 } 9 #blue{ 10 backg

day 39 盒模型 display 浮动

一.盒模型属性: width:内容的宽度 height:内容的高度 padding:内边距内容到边框的距离 border:边框 margin:外边距另一个边到另一个边的距离盒模型的计算: 总结:如果保证盒模型的大小不变,加padding 就一定要减width或者减height 前提是:在标准文档流 padding:父子之间调整位置 margin: 兄弟之间调整位置 1.1 adding的设置 padding-top: 30px; padding-right: 30px; padding-

CSS浮动特性

float:left/right左浮动有浮动特点: ①浮动不占位:浮动元素不占位置 ②默认排列成一行,遇到边界自动换行 ③如果有文字(没有设置浮动的元素内容)会绕着浮动元素走 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> .main{ wi

CSS——浮动及应用&清除浮动

浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为文档流 , 字面翻译普通流或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS的定位机制有3种:普通流(标准流).浮动和定位. html语言当中另外一个相当重要的概念----------标准流!或者普通流.普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列:按照这种大前提的布局排

css浮动(float)详解

一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. right 元素向右浮动. none 默认值.元素不浮动,并会显示在其在文本中出现的位置. inherit 规定应该从父元素继承 float 属性的值. 三.浮动有什么作用? 作用:在html文档流中,分为行元素.块元素和行内块元素, 行元素和行内块元素都是以横向排列的,而块元素则是以流的形式从上往下排列

CSS之浮动布局及相关问题

CSS之浮动布局及相关问题 1.什么是浮动: 在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置. 2.浮动的原理; 使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动的边缘 3.浮动的生成: 使用css属性 float:left/right/none左浮动/右浮动/不浮动(默认) 4

【Web】CSS中的浮动float

CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用导航效果复习一波简单记录 - 慕课网 - 从网页搭建入门JavaWeb 1.float浮动属性 float中的四个参数 float:left; 左浮动 float:right;右浮动 float:none;不浮动 float:inherit;继承浮动控制元素 inherit 子元素继承父元素的浮动属性

float浮动的详细总结

float浮动的详细总结 1.定位方案在css中,有4种常用的方法对元素进行定位和布局: normal flow:标准流.文档流: position:定位(relative.absolute.fixed): float:浮动: flex:弹性布局: 其中浮动.定位的absolute和fixed都会让元素脱离标准流,以达到灵活布局的效果. 2.float的属性值 float属性的常用取值有以下3个: none:不浮动(float的默认值): left:向左浮动: right:向右浮动: 3.浮动

为什么浮动老是浮动不好

热门专题