1.浮动元素会让元素脱离文档流。
2.行框和清理
如果浮动元素后有一个文档流中的元素，框的文本内容会受到影响，留出空间。
用clear：left、right、both、none可以避免。
3.加一个清理元素可以迫使元素包围。
或者使用浮动容器
原文地址：https://www.cnblogs.com/John-/p/8253967.html
时间： 2024-08-11 22:10:30
浮动模型笔记
浮动模型笔记的相关文章
CSS布局模型（流动模型、浮动模型、层模型）
在网页中,元素有三种布局模型: 1.流动模型(Flow) default,就是块级元素都自上而下的分布,宽度都为100%.内联元素都从左到右水平分布. 2.浮动模型 (Float) div.p.table.img 等元素都可以设置为浮动.两个 div 显示在一行的代码如下: div{ width:200px; height:400px; border:2px red solid; float:left; } 3.层模型(Layer) 层模型有三种形式: (1)绝对定位(position: abs
学习总结：CSS(一)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
.displayTal { width: 100%; font-size: 13px } .displayTal1 { width: 30%; height: 30px; font-size: 13px; color: #009933 } .displayTal2 { width: 40%; height: 30px; font-size: 13px; color: #009933 } .displayTal3 { width: 30%; height: 30px; font-size: 13p
CSS布局模型 之 浮动模型（浮动的工作原理和清除浮动技巧？）
浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空间的块级元素,仍然被看作是占据了一整行,只不过是被浮动元素占据的那部分空间无法利用罢了). 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止:如果当前线上的水平空间不足,它将逐行向下移动,直到有空间为止(所以浮动元素不会影响页面上方布局).任何元素都可以浮动,浮动元素会生成一个块级框(拥有块级
浮动模型
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望. 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div.p.table.img 等元素都可以被定义为浮动.如下代码可以实现两个 div 元素一行显示. div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div&
标准文档流.浮动以及清除浮动(学习笔记)
标准文档流 1.当后面空间不够时,会空白折叠,自动换行. 2.当高矮不齐时,会底部对齐. 3.自动换行. 标签根据显示的内容划分成:文本级,容器级. 按照文档流划分:块级元素.行内元素; 块级元素: (1).霸占一行,不能与其他任何元素并列. (2)能接受宽高. (3).如果不设置宽度,那么宽度将默认变为父亲的100%. 行内元素: (1).与其他行内元素并排; (2)不能设置宽高.默认宽度就是文字宽度. 所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素. 所有的容器级标签
HTML+CSS笔记 CSS进阶再续
CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.
《CSS网站布局实录》学习笔记（三）
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3.1.1 div是什么 div是XHTML中制定的.专门用于布局设计的容器对象.在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table.如今,接触另一种布局方式--CSS布局.div正是这种布局方式的核心对象.仅从div的使用上说,做一个简单的布局只需要依赖两样东西:di
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head
web前端-html学习笔记
学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1> 2.<em><strong><span><p>标签的用法: <span><em>狗狗</em></span> <strong>狗狗</strong><span>