Use the clear attribute of css to achieve the ad text wrapping effect

Have you seen that the advertisements of large websites are placed in the middle of the content to wrap the text? Generally, advertisements of ordinary small websites can only be placed at the beginning or end of the content. Maybe the cms system of large websites has this function. The basics of cms commonly used by our small websites There is no such function, because it is impossible to automatically add an advertising tag to the content tag, unless you manually edit it when adding an article, which is not tiring.

I have never thought of using css to control it, mainly because I didn't expect the clear attribute. I accidentally saw an introduction today and realized that it is so simple to implement text wrapping.

Code example:

<div class="news">
<div style="float:left;height:300px;width:0">A blank layer with a width of 0, using the height of this layer to control the upper and lower positions of the advertising layer</div>
<div style="float:left;height:250px;width:250px;clear:left;">Advertising code</div>
</div>

The key lies in the role of clear:left. Clear has three attributes: clear:both, clear:left, and clear:right, which respectively indicate clearing the floating blocks on both sides, left, and right. Adding clear:left to the advertising layer means that the layer will no longer float relative to the blank layer and will move downwards. It's great, haha.

Let’s compare:

<div class="news">
<div style="float:left;height:300px;width:100px;background:#CCC;">Add width and background to facilitate observation of the effect</div>
<div style="float:left;height:250px;width:250px;">If you remove the clear float, you will understand its meaning</div>
</div>

If you add this one:

<style>.news img,.news table{clear:both;}</style> //Let the pictures and tables in the content not cover the advertisements

Unfortunately, the above test found that only IE is feasible. Firefox and Opera have different results. The effect of IE is that the image automatically moves down when encountering the advertising layer. Firefox will not move down, but it will not cover the advertising layer because the advertising The layer is at the front. In opera, the image will not move down and will cover the advertising layer. It’s funny.

Improved again:

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //Let pictures and tables automatically be at the bottom

Finally it’s done, it’s pretty perfect, and the effect of surrounding advertising content is now complete :)

//2008-02-29, modified by: What is

Forgot to add

Someone asked if the text should be wrapped on the top and bottom right, so I changed it as follows: