【css】关于浮动float

　　浮动对我来说，一直都很神奇。

　　特别不老实，一会儿跑上来，一会儿跑下去的。

　　float:left;左浮动

　　float:right;右浮动

　　float:none;不浮动#注意！1.做水平布局时，所有元素都需要设定浮动（一般出现在header中，又有logo又有nav的）2.元素设定浮动时，本身不占位了，需要给父级盒子固定高度（后期解决方案：需要清楚浮动），这样下面的元素不会往上跑（暂时）3.拥有浮动元素的宽度之和不可大于父级盒子，否则最后一个会被挤下来4.盒子加上浮动后，宽度从100%变成了自适应（比如有多少字就显示多少宽）

时间： 2024-10-19 00:02:10

【css】关于浮动float的相关文章

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

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

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

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

css清除浮动float的三种方法总结

转载地址:https://my.oschina.net/leipeng/blog/221125 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</

CSS.04 -- 浮动float、overflow、定位position、CSS初始化

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

CSS之浮动float

参考:分享:CSS深入理解之float浮动 一:float设计初衷 即是为了实现文字环绕效果 包裹:BFC(块级格式化上下文) 破坏:容器被破坏,父元素高度塌陷(标准, 二:清除浮动(带来的影响) 1:方法一,在底部插入clear:both clear:html block 水平元素底部 css after 伪元素 2:方法二,BFC/haylayout 3:clear与margin重叠 三:浮动与流体布局 尽量少用flaot实现砖头布局,浮动用于流体布局 四:float兼容性

通俗易懂的CSS的浮动float详解

目录: 1. CSS浮动属性float详解 2. CSS常见页面布局 3. CSS浮动清除和清除浮动的几种方法 4. 高度塌陷的产生条件和解决方法 ## CSS浮动属性float详解 *首先,我们需要了解什么是浮动?浮动是指(浮动的特点):- 将元素排除在普通流之外,即元素将脱离标准文档流.- 元素将不在页面占用空间.- 将浮动元素放置在包含框的左边或者右边.- 浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.- 经常使用它来实现特殊的定位效果. float的属性

关于css中浮动float的最好理解！

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div style="border:3px solid silver; width:300px;"> <div id="container" style=&

css清楚浮动的方法

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

CSS布局之float浮动

之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料是其一,但我觉得更重要的是把你遇到的问题和解决方法记录下来..这样以后你的开发效率是多高.言归正传,对浮动进行一些记录. 1.首先,网页是一个文档流,默认按块元素和级联元素从左到右,从上至下的依次显示.而Float浮动元素,就好比是漂浮在了文档流之上,不占据文档流的位置. 如下就是不进行任何浮动的文

CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下