巧妙运用浮动元素不会压住文字的特性
html
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场
</div>
css
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: red;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-rgiht: 5px;
}
.pic img {
width: 100%;
}
原理 巧妙运用浮动元素不会压住文字的特性 案例 html css
文字绕图 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果。 ...
问答 1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征：文字环绕浮动...
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征： 元素脱离正常文档流，文字环绕图...
什么是浮动 浮动的本质：实现文字环绕效果元素脱离文档流不脱离文字流脱离文档流：假如A元素浮动了，原本排在该元素之后...
float实现文字环绕图片效果： 清除浮动的方法一： 在浮动元素后面使用一个空元素 清除浮动的方法二： 给容器添加...
float实现文字环绕图片效果： 清除浮动的方法一： 在浮动元素后面使用一个空元素 清除浮动的方法二： 给容器添加...
一、浮动的设计初衷 文字环绕效果 二、 浮动的特性： 包裹（元素） 破坏（父元素的高度） 2.1 具有包裹性的其它...
浮动设计的初衷并不是用来布局的，而仅仅是为了实现图片文字环绕效果，即图片做浮动，文字环绕图片。简单来说就是块级元素...
一、浮动特点： 1.脱离标准流(脱标)---半脱离标准流（文档流） 2.文字环绕的效果：当文字周围存在浮动的元素，...
本文标题：文字环绕浮动元素
本文链接：https://www.haomeiwen.com/subject/nfkwnhtx.html
网友评论