display和float （04）

最新推荐文章于 2022-06-27 07:34:35 发布
最新推荐文章于 2022-06-27 07:34:35 发布
阅读量464 收藏 4
点赞数 2
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yihjh/article/details/109440539
版权
HTML 同时被 2 个专栏收录
8 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏

display

display

block   块元素

inline   行内元素

inline-block   行内块元素

     行内--不换行

      块---设置宽高

none   不显示

inline-block   存在的问题

font-size:0;      加在父组件上，同时在子标签上再次设置font-size

子元素实际高度不一致时，需要vertical-align:top;   设置顶部对齐

无法做到右对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>display</title>
		<style>
			.parent{
				font-size: 20px;
			}
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				display: inline-block;
			}
			span{
				width: 100px;
				height: 100px;
				border: 2px solid red;
				display: inline-block;
				font-size: 18px;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<section class="parent">
		    <div>
			    div
		    </div>
		    <span>
			span
		    </span>
		</section>
	</body>
</html>

 其运行结果为：

通过display:inline-block;（可以得到行内块元素）

缺点：他们两个之间有一道缝隙，（是由于换行符的占位引起的）。

可以通过设置

.parent{

     font-size:0px;

}

来缩小之间的间距。

 

display案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>display案例</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			ul{
				text-align: center;
				border: 1px solid gray;
				width: 650px;
			}
			ul li{
				list-style: none;
				display: inline-block;
				margin: 20px;
				padding: 10px;
				border: 1px solid wheat;
				box-shadow: rgba(0,0,0,0.5) 0 0 10px;	
			}
			ul li:hover{
				border: 1px solid gray;
				border-radius: 5px;
				
			}	
			ul li img{
				width: 150px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是风景图</h3>
				<p>夕阳很美</p>
			</li>
		</ul>
	</body>
</html>

其运行结果为：

float

浮动float

none   默认

left   左浮动

right   右浮动

浮动的本质：

a、脱离标准文档流

b、层级提高

c、根据浮动的方向，定位于父元素的左上或右上

d、多个浮动的元素按照流式布局依次排序

浮动的影响：

后面的兄弟元素   顶上来

浮动元素层级提升，不会盖住不浮动元素的内容--不是层压层的效果

所有的元素都浮动了，父控件都包不住子元素，边框塌陷--影响父控件后面的元素

解决

清除浮动   clear:both;

认为浮动的元素是标准文档流的效果

在行内元素无效

1、在父控件的末尾添加块元素-----容易理解

<div class="clear"><div>-------------很多div元素，标签冗余

.clear{

     clear:both;

}

2、给父控件添加height

  • 在固定高度的情况下   很实用
  • 内容不确定的情况下，就不适合了

3、overflow   溢出的时候--更简单

hidden   父控件重新计算高度（就直接被包含起来了）

-----不适用的地方   下拉菜单

4、after伪类--推荐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float</title>
		<style>
			section{
				border: 1px solid red;
			}
			.clear:after{
				content: "";
				clear: both;
				display: block;
			}
			#div1{
				width: 50px;
				height: 50px;
				background: red;
				float: left;
			}
			#div2{
				width: 100px;
				height: 100px;
				background: orange;
				float: left;
			}
			#div3{
				width: 150px;
				height: 150px;
				background: gray;
				float: left;
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<section class="clear">
			<div id="div1">div1</div>
			<div id="div2">div2</div>
			<div id="div3">div3</div>
		</section>
		<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
	</body>
</html>

其运行结果为：

这样就可以把section里的所有内容框起来了，会随着整体的宽度来进行浮动。

float案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float案例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				border: 1px solid gray;
			}
			.clear:after{
				content: "";
				clear: both;
				display: block;
			}
			ul li{
				float: left;
				list-style: none;
				margin:10px;
			}
			ul li img{
				width: 125px;
			}
		</style>
	</head>
	<body>
		<ul class="clear">
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
		</ul>
	</body>
</html>

其运行结果为：

这样就可以随着页面的宽度而发生浮动

float案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float案例2</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			ul{
				width: 630px;
				border: 1px solid gray;
				overflow: hidden;
			}
			ul li{
				width: 200px;
				list-style: none;
				float: left;
				border: 1px solid gray;
				margin: 5px;
				padding: 5px;
				box-sizing: border-box;
				border-radius: 5px;
				overflow: hidden;
			}
			ul li div{
				width: 80px;
				float: left;
				border: 1px solid orange;
				border-radius: 5px;
				margin-right: 5px;
				padding: 2px;
				box-sizing: border-box;
			}
			ul li img{
				width: 100%;
				vertical-align: middle;
				border-radius: 5px;
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<ul class="clear">
			<li>
				<div>
					<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				</div>
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<div>
					<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				</div>
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<div>
					<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				</div>
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<div>
					<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				</div>
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<div>
					<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				</div>
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
			<li>
				<div>
					<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
				</div>
				<h3>这是一张风景图</h3>
				<p>夕阳很美</p>
			</li>
		</ul>
	</body>
</html>

其运行结果为：

overflow溢出处理

overflow   溢出   来设置

visible   显示

hidden   隐藏

scroll   添加滚动条

auto   自动（看水平和竖直方向是否需要滚动条，需要就会显示，不需要就不显示了）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>overflow溢出处理</title>
		<style>
			p{
				width: 200px;
				height: 38px;
				font-size: 30px;
				border: 1px solid gray;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<p>今天是星期一，新的一周开始了</p>
	</body>
</html>

其中overflow:visible;的运行结果为：

所有内容全部显示出来，多余的部分显示在边框外

其中overflow:hidden;的运行结果为：

边框以内的内容会全部显示出来，边框以外的内容会全部进行隐藏。

其中overflow:scroll;的运行结果为：

他会显示固定的高度，所有内容都在这里，可以点击右侧的下拉框进行查看。

其中overflow:auto;的运行结果为：

当内容比较多时，他会以下拉框的形式出现；

内容比较少时就用边框包围即可。

display和float的区别

display

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>display和float的区别</title>
		<style>
			.parent{
				width:400px;
				border:1px solid gray;
				text-align:center;
				font-size: 0;
			}
			.parent div{
				display: inline-block;
				width: 100px;
				height: 100px;
				border: 1px solid red;
				font-size: 20px;
				vertical-align: top;
			}
			.parent div:first-child{
				width: 150px;
				height: 150px;
			}
			.parent div:nth-child(2){
				width: 50px;
				height: 50px;
			}
			.parent div:nth-child(3){
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div>div1</div>
			<div>div2</div>
			<div>div3</div>
		</div>
	</body>
</html>

其运行结果为：

display和float的区别2

float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>display和float的区别</title>
		<style>
			.parent{
				/*width: 400px;*/
				border: 1px solid blueviolet;
				text-align: center;
				font-size: 0px;
			}
			.parent div{
		
				width: 100px;
				height: 100px;
				border: 1px solid red;
				font-size: 20px;
				vertical-align: top;
				float: left;
			}
			.parent div:first-child{
				width: 150px;
				height: 150px;
			}
			.parent div:nth-child(2){
				width: 50px;
				height: 50px;
			}
			.parent div:nth-child(3){
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div>div1</div>			
			<div>div2</div>
			<div>div3</div>
		</div>
	</body>
</html>

其运行结果为：

会随着界面的宽度进行左浮动，但是边框不会把内容包裹起来，会出现边框塌陷

 

 

 

 

欢欢**
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浮动float和display
weixin_44011306的博客
06-26 689
浮动float和display浮动样式 floatcss 浮动示例常规浮动效果1常规浮动效果2常规浮动效果3常规浮动效果4float 浮动实际应用场景：clear 清除浮动：float 浮动副作用-塌陷父元素：display 设置元素框类型 浮动样式 float 浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，使用浮动的元素会默认转换为块儿级。 css 浮动示例 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 常规浮动效果1 当框 1
css(display,float,position)深入理解
12-13
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否...
display和float
是略不是咯的博客
08-04 234
display和float **块级元素：**独占一行，里面可以放行内元素，类似于一个大容器 <h1><p><li><div>等 **行内元素：**放在一行里面的元素，类似于一个一个小组件，设置高度没有效果 <img><em><strong><span>等 块级和块级一起放时会垂直排列，行内元素可以放在一行里。 可以用display来更换块级和行内 display:block /*变成块级元素*/ disp
浮动display和float
屿屿屿屿屿的博客
06-27 978
块级元素：独占一行 h1-h6 p div 列表…行内元素：不独占一行 span a img strong 3、float 1、左右浮动 float 4、父级边框塌陷问题(以float为例) 增加父级元素的高度 增加一个空的div标签，设置属性 父级元素增加属性 父类增加一个伪类 小结：**浮动元后面增加空div简单，代码中尽量避免空div设置父元素的高度简单，元素假设有了固定的高度，就会被限制overflow简单，下拉的一些场景避免使用父类添加一个伪类：after写法稍微复杂一
CSS——display和float
weixin_30929295的博客
07-20 187
1、display 属性规定元素应该生成的框的类型。 值描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示...
CSS display & float详解
前端小白
09-09 1101
一、display属性 1．  display属性的作用是规定元素以什么方式渲染。常用的值如下： none：不被渲染 block：以块级元素渲染 inline：以内联元素渲染 inline-block：以行内块渲染 inherit：继承父级容器的渲染方式 2．  元素渲染类型 浏览器对每个html元素有默认的渲染类型，默认为块级元素的主要有：div、form、h1-h6、hr、no
CSS display:inline和float:left两者区别探讨
09-25
在CSS布局中，`display:inline` 和 `float:left` 是两个重要的属性，它们分别用于不同的布局策略，但有时也会一起使用以实现特定的设计效果。下面将详细解释这两个属性的含义和区别。 首先，`display:inline` 是一...
display和float以及布局.md
11-02
display和float以及布局.md
浅谈CSS中display/float/position属性值的相互影响
12-13
有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下： 如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。 否则，如果’...
display与float的区别
qq_43372535的博客
11-30 950
display display属性 display特性 块级元素与行级元素的转变 控制块元素排到一行 控制元素的显示和隐藏 float float属性 display：inline-block和float的区别 display可以让元素排在第一行，并且支持宽度和高度代码实现起来方便 位置方向不可控，会解析空格 IE6.IE7上不支持 float可以让元素排在一行并制作宽度和高度，可以决定排列方向 float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添..
display 和float
qq_45326705的博客
10-30 84
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 200px; width: 200px; border-color: #d99f23; .
Web前端 学习知识点总结（四）之display 和 float
weixin_45118229的博客
10-07 747
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、display1.页面的布局2.display的内的属性3.hover隐藏案例二、使用步骤1.引入库2.读入数据总结 前言 本文来总结一下display和float，两者为了页面的合理布局而设计的。 提示：以下是本篇文章正文内容，下面案例可供参考 一、display
display；float浮动；父级边框塌陷的问题（浮动带来的问题）；display与float对比
weixin_45964083的博客
04-24 150
display 块级元素：独占一行 如：h1~h6,p,div,列表。。 行内元素：不独占一行 如：span，a，img，strong。。。 行内元素可以被包含在块级元素中，反之，则不可以 <style> div{ width: 100px; height: 100px; border: 1px solid red; } span { width: 100px; height: 100px; bo
【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： ...
weixin_33835103的博客
05-28 118
display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。 浏览器支持: 所有主流浏览器都支持 display 属性。...
知识点：float、position与display关系
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
12-25 2009
问： position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ float、position 和 display 之间的关系： 如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生； 除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属
display和float使用上的区别（1）-----多栏布局的实现
weixin_33674976的博客
04-07 389
在说这个问题之前，先简要介绍下display和float这两个属性。 float属性控制html组件是否浮动与如何浮动，当通过该属性设置某个对象浮动后，该对象将被当成块组件处理。它有left和right两个值，分别指定对象向右向左浮动。 而display属性用于规定元素应该生成的框的类型。来看下display可取的值：通过上述介绍可以看出，其实float和...
display, position和float的关系
Jessica0906的博客
11-13 1051
display, position和float的关系？ （ps：第一次被问到这个问题时候其实是一脸懵逼，因为在此之前压根没把这仨放一起对比研究过，直接把他们有的分到了萝卜筐，有的分到了白菜筐，主观上没觉得有啥关系，只觉得他们是各司其职的，不过稍微一琢磨他们还是有点关联和相互制约的，以下是参考了别人的答案和自己实验得出一些粗浅的关系） ①如果display设置为none，那positio
display和float的用法详解
weixin_50500741的博客
03-12 1430
目录 （1）块级元素（block) （2）行内元素（inline） 一、flaot的属性：实现元素的浮动 1、左浮动 （1）两者均未使用浮动时 （2）仅box1左浮动 （3）仅box2左浮动 （4）box1和box2均左浮动 2、右浮动 （1）仅box1右浮动 （2）仅box2右浮动 （3）box1和box2均右浮动 二、display的属性：规定元素应该生成的框的类型 (1)display: inline-block (2)覆盖默认的 Display 值 1...
CSS浮动（display、float、边框塌陷、溢出处理）
baolingye的博客
06-19 2538
CSS浮动 一、标准文档流 标准文档流指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。 这也是元素默认的排列方式 ，浮动一般用于图片，也可用于页面布局 标准文档流的组成 u块级元素（block） h1~h6 、p 、 div 、列表 内联元素（inline） span 、 a 、 img 、 strong 内联标签可以包含于块级标签中，成为它的子元...
css3 display和float
最新发布
05-23
CSS3中的display属性用于控制元素的显示方式，常用的取值包括： - block：元素将被显示为块级元素，即在新行上开始，占据整个可用的宽度。 - inline：元素将被显示为行内元素，即在一行中显示，不会换行，并且元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值