CSS 浮动元素对块级元素和行内元素的影响

float

float设计之初，主要是为了解决文章配图时的布局问题。如下图

HTML代码

<body> <img src="css.png" alt="CSS-icon"> <article> CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。本文主要介绍用于装饰HTML网页的CSS技术。其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。 CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。 CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。 article> body>

CSS代码

img{ float: left; width: 100px; height: 60px; margin: 10px; border: 1px solid; } article{ background-color: #eeeeee; padding: 10px; width: 500px; height: 180px; }

从上图可以看到，浮动后，的下面有

的背景颜色，这说明

确实忽略了的存在。但同时我们也注意到，

中的文字并没有忽略的存在，而是绕开进行排列，这说明浮动元素可能对块级元素和行内元素有不同的处理方式，下面分开讨论一下。 
  块级元素
 对于块级元素而言，他们会忽视浮动元素的存在，根据上一个非浮动元素或是父元素来进行自己的定位。如图中
略过，而根据来进行自己的定位，如果前还有一个非浮动元素，则会根据该元素进行定位，如下图。
 
 HTML代码 
  <body>
	<img src="css.png" alt="CSS-icon">
	<div id="block">div>
	<article>
		CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。
		本文主要介绍用于装饰HTML网页的CSS技术。
		其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。
		CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。
		CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。
	article>
	div>
body>
 
  CSS代码 
  #block{
	width: 200px;
	height: 200px;
	background-color: #FAEBD7;
}
 
  行内元素
 行内元素与块级元素不同，不能设置宽高。行内元素实际上受制于行框，而这个行框是不会忽视浮动元素的存在。文字就属于行内元素，或者说，
里面的文字我们可以认为是被包裹在一个里的，而是一个行内元素。下面我们调用控制台查看一下行内元素的行框的宽度。
 
 注：这里为了更准确显示每行行框的尺寸，每句分别用包裹。如果是整段包裹，在显示行内元素宽度时，会显示最宽的一行的行框的宽度。
 从图中展示的行框的宽度即可印证行内元素不会忽视浮动元素。 
   
   浮动会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得想浮动根本不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。——《精通CSS：高级Web标准解决方案（第2版）》

CSS 浮动元素对块级元素和行内元素的影响

float

你可能感兴趣的:(CSS学习笔记)