无锡百度关键词推广_制作二维码的软件app_seo短期课程_网络营销app有哪些

浮动

可以让块级元素待在一行，紧挨着，没有空格
float：left

1. 浮动的元素会脱离正常的文档系统，像浮云一样飘起来
2. 浮动元素后面的正常元素会自动补位
3. 浮动元素会被父元素的宽高所束缚，所以不算完全的脱离文档流
4. 当浮动元素的上一行是正常元素时，这个浮动元素只能待在当前行，不能跑到上一行
5. 左浮动：元素向左跑，会从上一行最右边出来继续跑，直到遇到做浮动元素，紧贴着他
6. 右浮动：元素向右跑，会从上一行最左边出来继续跑，直到遇到做浮动元素，紧贴着他

        ul{width: 800px;}ul li{float: left;list-style-type: none;list-style-position: inside;padding: 20px;}img{width: 100px;height: 100px;}

    <ul><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li></ul>

清除浮动

规定元素哪一侧不能有浮动元素
清理元素左侧的浮动：

   clear: left;

元素右侧无浮动元素，记得考虑页面的加载顺序：

   clear: right;

元素左右侧都无浮动元素：

   clear: both;

父元素高度塌陷

（子元素）li设置了浮动，不能给父元素撑起高度（父元素未设置高度），因而会造成塌陷，如下图所示：

        ul{width: 800px;border: 1px solid red;}

清除浮动的方法

1. 给父元素（块级元素）设置高度
2. 在元素内容之后加一个块级元素，并设置左右两侧都无浮动元素
3. （不增加元素的前提下）使用伪元素的方法，并将其转化为表格元素

        ul::after{content: "";display: table;clear: both;}

统一设置，可将其设置为一个类，这样只需要在父元素中引入类名即可：

        .clearfix::after{content: "";display: table;clear: both;}

    <ul class="clearfix"><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li></ul>

注意：父元素设置有高度时，不用清除浮动