浮动元素的特点（2）

（3）标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。（脱标的元素，是没有行、块、行内块这种方法）。

（4）浮动元素（脱标元素），可以使用盒模型的5大属性。

  <style>/* 标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。 */.uname{float: left;width: 300px;height: 60px;line-height: 60px;outline: 1px dashed yellow;}/* 浮动元素（脱标元素），可以使用盒模型的5大属性。 */.aname{float: left;width: 300px;height: 300px;border: 3px solid skyblue;padding: 20px 30px 40px 10px;margin-bottom: 20px;margin-right: 20px;}</style>
</head>
<body><span class="uname">你好</span><span class="uname">你好</span><br><br><br><br><br><a href="" class="aname">小李先生</a><a href="" class="aname">小李先生</a><a href="" class="aname">小李先生</a>
</body>

效果预览图

    <style>*{margin: 0;padding: 0;}.parent{width: 600px;height: 400px;outline: 1px dashed red;margin: 20px auto 0;}.son{width: 200px;height: 200px;}.son1{background-color: skyblue;float: right;}.son2{background-color: pink;float: right;}</style>
</head>
<body><div class="parent"><div class="son son1"></div><div class="son son2"></div></div>
</body>

效果预览图

（5）浮动的元素有“字围”效果

注意：这个效果是单个元素浮动。

    <style>body,div,img,p{margin: 0;padding: 0;}.parent{width: 790px;margin: 20px auto 0;outline: 1px dashed skyblue;}/* 浮动的元素有“字围”效果 */.pic{width: 220px;float: left;margin-right: 10px;}</style>
</head>
<body><div class="parent"><!-- 我们让 包裹图片的这个.pic 盒子浮动 --><div class="pic"><img src="./img/1.webp" alt="" width="220"></div><div class="content"><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p><p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p><p>夜梦极可怪。见一淡绿百合花，颈弱而花柔，花身略有斑点青渍，倚立门边微微动摇。在不可知的地方好像有极熟悉的声音在招呼：</p><p>“你看看好，应当有一粒星子在花中。仔细看看。”</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p></div></div>
</body>

效果预览图

浮动元素的特点（2）相关推荐

浮动元素会引起的问题和你的解决办法
问题: (1)父元素的高度无法被撑开,影响与父元素同级的元素 (2)与浮动元素同级的非浮动元素会跟随其后 (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法: ...
CSS浮动元素特点有什么
什么是浮动? 元素的浮动是指设置了浮动属性(flot)的元素. CSS浮动有什么作用? 1.让多个盒子水平排列成一行,浮动成为布局的重要手段; 2.可以实现盒子的左右对齐等等; 3.浮动最早是用来控制 ...
已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐
一.已知宽高的浮动元素水平垂直居中对齐效果: 样式CSS: 1 <style> 2 .parent{ 3 position:relative; 4 border:2px solid #0 ...
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行转载于:https://www.cnblogs.com/mabelstyle/p/3844739.html
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
浮动元素的display属性
在页面布局的时候,我们经常会将元素设置成浮动效果来解决一些实际问题,无论当前元素是块级元素还是行内元素, 似乎都有需要设置成浮动的时候,但与此同时,我们有没有想过,在元素被设置成浮动之后,他们的blo ...
定义了浮动元素后margin-bottom失效的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀.margin-bottom的bug是 ...
如何垂直居中一个浮动元素
如何垂直居中一个浮动元素 // 方法一:已知元素的高宽 #div1{ width:200px; height:200px; position: absolute; /*父元素需要相对定位 ...
CSS的clear去除清除浮动元素
clear 属性规定元素的哪一侧不允许其他浮动元素 left 在左侧不允许浮动元素. right 在右侧不允许浮动元素. both 在左右两侧均不允许浮动元素. none 默认值.允许浮动元素出现在两 ...
IE6/7和IE8/9（怪异模式）浮动元素折行Bug
网页设计中,我们经常需要设置一个元素向左或向右浮动.如 <!DOCTYPE HTML> <html> <head><title>IE6/7和IE8/9( ...

浮动元素的特点（2）

浮动元素的特点（2）相关推荐

最新文章

热门文章