CSS3 消除波动的方式示例

日期:2021-01-20 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

1、 目地

根据本文,让大伙儿能够搞清楚消除波动的基本原理和几种方式,最终得出1种本文觉得最好是用的方式。

2、 內容简介

1、 引进,复原波动原本的实际意义
2、 表明,具体开发设计中常见波动来做甚么
3、 发问,为何要消除波动
4、 回应,怎样消除波动和常见的几种方式
5、 结果,得出本文觉得最好是用的方式

3、 文章正文

1、 波动原本的实际意义

波动的实际意义本来仅是用来让文本围绕在照片周边罢了。

根据上图能够看到,设定照片左波动能够将照片从一切正常文本文档流中抽取下来,后边的元素会忽视波动元素原先的部位,因此能够看到以块元素显示信息的span标识插进到了照片下面,可是,大家发现文本却不容易嵌入到照片下面,由于这便是波动最纯碎的实际意义--让文本围绕在照片周边(有关为何文本不容易插进波动元素下面在网络上也是有1些探讨,大伙儿能够去检索1下,本文在此就不做更详尽的解释了)。

PS: 假如想让文本也插进到波动元素下面,能够根据设定肯定精准定位来完成。

// html编码
  <section>
    <div class="origin1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582⑻c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>想像我是1大段文本</span>
    </div>
    <div class="float1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582⑻c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>想像我是1大段文本</span>      
    </div>
  </section>
// css编码
.origin1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;  
}

.float1 img{
  float: left;
}

.float1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;
}

2、 波动常常被用来做甚么

由于波动可让块状元素并排显示信息,因此常常用来做导航栏栏,內容分层栏等合理布局。

// html编码
  <section class="section2">
    <ul>
      <li><a href="#">商品管理中心</a></li>
      <li><a href="#">服务管理中心</a></li>
      <li><a href="#">采访部</a></li>
      <li><a href="#">顾客见证</a></li>
      <li><a href="#">招贤纳士</a></li>
    </ul>
  </section>
// css编码
.section2 li{
  list-style: none;
  float: left;
  padding: 20px;
  height: 20px;
  background-color: #1249c3;
  border-right: 1px solid #a0a2a2;
}

.section2 li a {
  color: #fff;
}

3、 为何要消除波动

根据上图能够看到,当3个板块左波动之后,由于它们摆脱了一切正常文本文档流,因此它们的父元素ul在不设定高宽比的状况下,没法被子元素撑开(可以看到情况色是由于我设定了ul的padding为10px),因此当你在后面新增元素的情况下,当然会排在ul后面,也便是插进到了3个波动的板块下面。
这其实不是大家要想的,这便是要消除波动的缘故。

// html编码
    <ul>
      <li><p>互动交流板块 li</p></li>
      <li><p>学习培训板块 li</p></li>
      <li><p>留言板块 li</p></li>
      我是本应当包裹在3个板块外面的父元素ul
    </ul>

    <div class="new">我是跟在ul后边的新div</div>
// css编码
ul {
  padding: 20px;
  background-color: #b7db05;
}

ul li {
  width: 200px;
  height: 200px;
  background-color: #e3e3e3;
  margin-right: 20px;
  text-align: center;
  float: left;
}

.new {
  height: 50px;
  background-color: #1be751;
}

4、 怎样消除波动

(1) 在最终1个波动的 li 元素后面新增1个空的块状元素div,并设定clear:both以消除全部波动。

// html编码
    <ul>
      <li><p>互动交流板块 li</p></li>
      <li><p>学习培训板块 li</p></li>
      <li><p>留言板块 li</p></li>
      我是本应当包裹在3个板块外面的父元素ul
      <div style="clear:both;"></div>        // 新增编码
    </ul>

    <div class="new">我是跟在ul后边的新div</div>

实际效果: ul后面的div元素的确能够在波动元素下边排序,而且设定margin、padding等也是对于波动元素的下边框。

缺陷: 多出了1个冗余标识,并沒有任何构造实际意义。

(2) 设定父元素ul的overflow: hidden或overflow: auto。

// css编码
ul {
  padding: 20px;
  background-color: #e7a5b8;
  overflow: hidden;
}

实际效果: 针对ul后边的元向来说,它们能够在波动元素下边先后排序了。
缺陷: 选用这类overflow方式时将会会对选用精准定位position的元素造成危害,由于在ul的范畴内,超过的一部分可能被掩藏,因此假如精准定位元素处在ul超过的范畴内,那末会被掩藏。

(3) 选用伪类方式,在最终1个波动元素的后面,加上clear:both。

// css编码
ul:after {
  content: "";
  clear: both;
  display: block;
}

实际效果: 很好的消除了波动带来的危害,而且沒有额外功效,也沒有新增无词义的标识。
缺陷: 临时还没发现。

4、 结果

综上所述,本文觉得最好是用的方式是选用after伪类来消除波动带来的危害,欢迎大伙儿前来探讨。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。