html浮动

  • 浮动元素的特征有:
    1.块在一排显示;
    2.内联元素支持宽高;
    3.无论是块元素还是内联元素,没有宽度时默认内容撑开宽度;
    4.脱离文档流;
    5.提升层级半级。
  • 对其他浮动元素的影响:后浮动的元素永不会超过先浮动元素的顶端。
  • 对普通元素的影响:浮动元素会从文档正常流中删除,使得紧挨它的元素位置发生偏移,影响布局。
  • 对文字的影响:浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
  • 八、清除浮动指什么? 如何清除浮动?
    清除浮动指的是:在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响布局的现象,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

    清除浮动的方法:
    1.使用带clear属性的空元素
    在浮动元素后使用一个空元素如<pre><div class="clear"></div></pre>,并在CSS中赋予<pre>.clear{clear:both;}</pre>属性即可清理浮动。亦可使用<pre><br class="clear" /></pre>或<pre><hr class="clear" /></pre>来进行清理。
    2.使用CSS的overflow属性
    给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
    3.使用CSS的:after伪元素

posted @ 2018-11-09 14:04  我翻译慢引领大军  阅读(234)  评论(0编辑  收藏  举报